@multiplatform.one/table-primitives 7.45.1 → 7.47.0

package/src/index.tsx

@@ -6,21 +6,27 @@
  */
 
 import {
+  edgeColorAt,
   hairline,
   MIN_PRESS_TARGET,
+  PageGutter,
   Surface,
   transitionProps,
+  usePhoneTableBleed,
   useResolvedKnobs,
   sizeTokenStop,
+  SizableText,
+  type PhoneTableBleed,
 } from "@multiplatform.one/theme";
 import { TableCellContext } from "./tableCellContext";
 import { wrapBareTextChildren } from "./textRidesText";
 import { Children, Fragment, createContext, isValidElement, useContext } from "react";
-import type { FontSizeTokens, SizeTokens } from "tamagui";
+import type { FontSizeTokens, SizeTokens, SpaceTokens } from "tamagui";
 import {
-  SizableText,
+  SizableText as TamaguiSizableText,
   Theme,
   ThemeableStack,
+  YStack,
   createStyledContext,
   isWeb,
   styled,
@@ -263,6 +269,122 @@ export function tablePressFill(restFill: unknown): `$color${number}` {
   return `$color${Math.max(step + 1, 4)}`;
 }
 
+// LC-146 PHONE-TABLE-BLEED: below `$sm` a table on the page line runs edge to
+// edge, and the gutter it dropped becomes the inset of each row's first and
+// last cell, so text stays on the page line while rows reach the screen edge.
+const TableEdgeInsetContext = createContext<string | null>(null);
+
+type CellEdge = "first" | "last" | "only";
+const CellEdgeContext = createContext<CellEdge | undefined>(undefined);
+
+/** The gutter the cells of the enclosing table take at its edges, or null. */
+export function useTableEdgeInset(): string | null {
+  return useContext(TableEdgeInsetContext);
+}
+
+/**
+ * Hands every row a full-bleed table's edge inset. Hosts that bleed their own
+ * outer frame (a scroll viewport around the Table) wrap custom rows in it;
+ * the Table primitive provides it itself.
+ */
+export function TableEdgeInset({
+  inset,
+  children,
+}: {
+  inset: string | null;
+  children: React.ReactNode;
+}) {
+  return (
+    <TableEdgeInsetContext.Provider value={inset}>
+      <PageGutter inset={null}>{children}</PageGutter>
+    </TableEdgeInsetContext.Provider>
+  );
+}
+
+function isRtlDocument(): boolean {
+  return isWeb && typeof document !== "undefined" && document.documentElement?.dir === "rtl";
+}
+
+/**
+ * The horizontal padding of an edge cell: the gutter on the outer side, the
+ * cell's own padding on the inner side. Native takes logical edges (Yoga lets
+ * start/end win over left/right); web writes the physical sides so they
+ * replace the cell's own `paddingHorizontal` instead of racing it in CSS.
+ */
+function cellEdgePadding(
+  edge: CellEdge,
+  inset: string,
+  own: { paddingHorizontal?: unknown; paddingLeft?: unknown; paddingRight?: unknown },
+): Record<string, unknown> {
+  const start = edge === "first" || edge === "only";
+  const end = edge === "last" || edge === "only";
+  if (!isWeb) {
+    return {
+      ...(start ? { paddingStart: inset } : {}),
+      ...(end ? { paddingEnd: inset } : {}),
+    };
+  }
+  const rtl = isRtlDocument();
+  const left = rtl ? end : start;
+  const right = rtl ? start : end;
+  return {
+    paddingLeft: left ? inset : (own.paddingLeft ?? own.paddingHorizontal),
+    paddingRight: right ? inset : (own.paddingRight ?? own.paddingHorizontal),
+  };
+}
+
+/** Marks a row's first and last element children for their edge inset. */
+function markEdgeCells(children: React.ReactNode): React.ReactNode {
+  const cells = flattenChildren(children).filter(isValidElement);
+  return cells.map((cell, index) => {
+    const edge: CellEdge | undefined =
+      cells.length === 1
+        ? "only"
+        : index === 0
+          ? "first"
+          : index === cells.length - 1
+            ? "last"
+            : undefined;
+    return (
+      <CellEdgeContext.Provider key={cell.key ?? index} value={edge}>
+        {cell}
+      </CellEdgeContext.Provider>
+    );
+  });
+}
+
+/**
+ * Marks the first and last cells of a row that is not a Table.Row (a
+ * virtualized host's div rows) for the enclosing table's edge inset.
+ */
+export function TableEdgeCells({ children }: { children: React.ReactNode }) {
+  const inset = useContext(TableEdgeInsetContext);
+  return <>{inset ? markEdgeCells(children) : children}</>;
+}
+
+/**
+ * LC-146 recipe for one row of a full-bleed card or document list: no card
+ * chrome at the screen edge, a hairline between rows, and the gutter as the
+ * row's horizontal inset.
+ */
+export function phoneBleedRowProps(inset: string) {
+  return {
+    borderRadius: 0,
+    borderWidth: 0,
+    ...hairline.bottom,
+    borderColor: "$borderColor",
+    elevation: 0,
+    shadowColor: "transparent",
+    paddingLeft: inset,
+    paddingRight: inset,
+  } as const;
+}
+
+/** LC-146 recipe for a full-bleed list frame: out to the screen edges, rows abut. */
+export function phoneBleedListProps(bleed: Pick<PhoneTableBleed, "frame"> | null) {
+  return { ...(bleed ? bleed.frame : {}), gap: 0 } as const;
+}
+
 const BodyRowIndexContext = createContext<number | undefined>(undefined);
 
 function indexBodyRows(children: React.ReactNode, counter: { next: number }): React.ReactNode {
@@ -275,6 +397,8 @@ function indexBodyRows(children: React.ReactNode, counter: { next: number }): Re
         </Fragment>
       );
     }
+    // A hidden row (DataTable's filler and clip fade) is chrome, not a record.
+    if ((child.props as { "aria-hidden"?: unknown })["aria-hidden"] === true) return child;
     return (
       <BodyRowIndexContext.Provider value={counter.next++}>{child}</BodyRowIndexContext.Provider>
     );
@@ -521,9 +645,13 @@ function extractCardModel(children: React.ReactNode): {
 /** Card list rendering for the Table primitive (layout="cards" / narrow auto). */
 function TableCardsList({
   children,
+  edgeInset,
+  selfBleed,
   ...props
 }: {
   children?: React.ReactNode;
+  edgeInset?: string | null;
+  selfBleed?: PhoneTableBleed | null;
   [key: string]: any;
 }) {
   const { knobProps } = useResolvedKnobs();
@@ -551,15 +679,21 @@ function TableCardsList({
         unknown
       >)}
       {...viewProps}
+      {...(edgeInset ? phoneBleedListProps(selfBleed ?? null) : {})}
+      {...(edgeInset ? ({ "data-phone-bleed": "true" } as Record<string, unknown>) : {})}
     >
-      {caption != null &&
-        (typeof caption === "string" || typeof caption === "number" ? (
-          <SizableText fontSize={knobProps.sizeToken as FontSizeTokens} color="$color10">
-            {caption}
-          </SizableText>
-        ) : (
-          caption
-        ))}
+      {caption != null && (
+        // LC-146: the caption stays on the page line while the cards bleed.
+        <YStack {...(edgeInset ? { paddingHorizontal: edgeInset as SpaceTokens } : {})}>
+          {typeof caption === "string" || typeof caption === "number" ? (
+            <SizableText fontSize={knobProps.sizeToken as FontSizeTokens} color="$color10">
+              {caption}
+            </SizableText>
+          ) : (
+            caption
+          )}
+        </YStack>
+      )}
       {rows.map((row, rowIndex) => {
         const stripe = tableZebraStripe(knobProps.tableZebra, rowIndex);
         const card = (
@@ -568,13 +702,17 @@ function TableCardsList({
             testID="table-card"
             {...knobProps.surface}
             {...knobProps.cardSurface}
-            elevation={knobProps.elevation}
             {...motion}
-            borderColor="$color6"
             {...(stripe === "odd"
               ? { backgroundColor: tableZebraFill(knobProps.cardSurface.backgroundColor) }
               : {})}
             {...(row.intent ? { backgroundColor: "$color3" as const } : {})}
+            {...(edgeInset
+              ? phoneBleedRowProps(edgeInset)
+              : {
+                  elevation: knobProps.elevation,
+                  borderColor: edgeColorAt("$color6", knobProps.borderWidthStop),
+                })}
             {...({ "data-table-zebra": stripe } as Record<string, unknown>)}
           >
             {row.cells.map((cell, index) => {
@@ -627,6 +765,13 @@ export interface ThemedTableProps extends Omit<React.ComponentProps<typeof Table
   size?: SizeTokens;
   /** Size key every cell's Surface forwards to its content. Default `size`, else `$3`. */
   cellSize?: SizeTokens;
+  /**
+   * LC-146: the gutter each row's first and last cell take as their inset
+   * when the table runs edge to edge below `$sm`. Omitted, a Table on the page
+   * line bleeds itself; a host that bleeds its own outer frame (a scroll
+   * viewport) passes the inset; null keeps the table inside the gutter.
+   */
+  edgeInset?: string | null;
 }
 
 /** The size key every cell's Surface forwards to its content (default `$3`). */
@@ -645,44 +790,81 @@ function ThemedTableComp({ size, cellSize, ...props }: ThemedTableProps) {
 
 function ThemedTableFrame({
   layout = "table",
+  edgeInset,
   ...props
 }: Omit<ThemedTableProps, "size" | "cellSize">) {
   const { knobProps } = useResolvedKnobs();
   const { sm } = useMedia();
+  const bleed = usePhoneTableBleed();
+  // LC-146: auto-bleed only when no host has decided for the table.
+  const selfBleed = edgeInset === undefined ? bleed : null;
+  const inset = edgeInset === undefined ? (bleed?.inset ?? null) : edgeInset;
   // LC-86: resolveKnobs already floors outlined+none to the hairline (0.5).
   const resolvedBorderWidth = knobProps.surface.borderWidth;
 
   const showCards = layout === "cards" || (layout === "auto" && sm === false);
   if (showCards) {
-    return <TableCardsList {...props} />;
+    return (
+      <PageGutter inset={null}>
+        <TableCardsList {...props} edgeInset={inset} selfBleed={selfBleed} />
+      </PageGutter>
+    );
   }
 
   const motion = transitionProps(knobProps.motion.control);
+  const table = (
+    <TableComp
+      // Table frames are R-OUTER + SF-CARD-tier surface (theme-propagation-spec
+      // `@multiplatform.one/table-primitives`): outer corners follow the capped
+      // outer radius map; like the card list, the fill never takes the
+      // control flip.
+      {...knobProps.surface}
+      {...knobProps.borderRadiusNested}
+      borderWidth={resolvedBorderWidth}
+      elevation={knobProps.elevation}
+      {...motion}
+      // Size knob sets default row height through the table context; consumer
+      // cellHeight (table- or cell-level) still overrides via {...props}.
+      cellHeight={knobProps.sizeToken as SizeTokens}
+      {...({ "data-animation": knobProps.motion.control.transition ? "on" : "none" } as Record<
+        string,
+        unknown
+      >)}
+      {...props}
+      // A full-bleed table has no side frame: the screen edge is its edge.
+      {...(inset
+        ? {
+            borderLeftWidth: 0,
+            borderRightWidth: 0,
+            borderRadius: 0,
+            ...({ "data-phone-bleed": "true" } as Record<string, unknown>),
+          }
+        : {})}
+      // borderSpacing 0 neutralizes the real <table> UA default (2px gaps
+      // between cells) so the migrated element keeps the div-table look.
+      style={[{ tableLayout: "fixed" as const, borderSpacing: 0 }, props.style]}
+    >
+      <TableEdgeInset inset={inset}>{props.children}</TableEdgeInset>
+    </TableComp>
+  );
   return (
     // A table nested in a body cell must not stripe its rows by the outer index.
     <BodyRowIndexContext.Provider value={undefined}>
-      <TableComp
-        // Table frames are R-OUTER + SF-CARD-tier surface (theme-propagation-spec
-        // `@multiplatform.one/table-primitives`): outer corners follow the capped
-        // outer radius map; like the card list, the fill never takes the
-        // control flip.
-        {...knobProps.surface}
-        {...knobProps.borderRadiusNested}
-        borderWidth={resolvedBorderWidth}
-        elevation={knobProps.elevation}
-        {...motion}
-        // Size knob sets default row height through the table context; consumer
-        // cellHeight (table- or cell-level) still overrides via {...props}.
-        cellHeight={knobProps.sizeToken as SizeTokens}
-        {...({ "data-animation": knobProps.motion.control.transition ? "on" : "none" } as Record<
-          string,
-          unknown
-        >)}
-        {...props}
-        // borderSpacing 0 neutralizes the real <table> UA default (2px gaps
-        // between cells) so the migrated element keeps the div-table look.
-        style={[{ tableLayout: "fixed" as const, borderSpacing: 0 }, props.style]}
-      />
+      {selfBleed ? (
+        // The table keeps width 100%, which ignores a negative end margin, so
+        // a plain stack takes the bleed and the table fills it.
+        <YStack
+          {...selfBleed.frame}
+          alignSelf="stretch"
+          {...((props.displayMode ?? (isWeb ? "table" : "flex")) === "flex"
+            ? { flexGrow: 1, flexShrink: 1, flexBasis: "auto" as const, minHeight: 0 }
+            : {})}
+        >
+          {table}
+        </YStack>
+      ) : (
+        table
+      )}
     </BodyRowIndexContext.Provider>
   );
 }
@@ -700,6 +882,11 @@ function ThemedTableHead(props: React.ComponentProps<typeof TableHead>) {
 function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps) {
   const { knobProps } = useResolvedKnobs();
   const context = TableContext.useStyledContext();
+  const edgeInset = useContext(TableEdgeInsetContext);
+  // A presentation row only hosts nested rows (the virtualized body), which
+  // mark their own edge cells through TableEdgeCells.
+  const children =
+    edgeInset && props.role !== "presentation" ? markEdgeCells(props.children) : props.children;
   const motion = transitionProps(knobProps.motion.control);
   const intent = resolveIntent({ accent, error, warning, success } as ThemedRowProps);
   const bodyIndex = useContext(BodyRowIndexContext);
@@ -742,7 +929,9 @@ function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps
       {...(stripe === "odd" && !intent && props.backgroundColor == null
         ? { backgroundColor: tableZebraFill(knobProps.surface.backgroundColor) }
         : {})}
-    />
+    >
+      {children}
+    </Row>
   );
 
   if (intent) {
@@ -787,7 +976,7 @@ function TableCellSurfaceBody({
   // fontWeight like any body text (MPO-446); the weight is the last prop so
   // no size or family variant paints the font ramp's weight over it.
   return wrapBareTextChildren(children, (label, key) => (
-    <SizableText
+    <TamaguiSizableText
       key={key}
       {...(isHeader ? {} : body)}
       fontSize={knobProps.sizeToken as FontSizeTokens}
@@ -805,22 +994,42 @@ function TableCellSurfaceBody({
       fontWeight={isHeader ? "600" : (bodyWeight as "400")}
     >
       {label}
-    </SizableText>
+    </TamaguiSizableText>
   ));
 }
 
+function useCellEdgePadding(
+  own: Record<string, unknown>,
+  base: { paddingHorizontal: string },
+): Record<string, unknown> | null {
+  const inset = useContext(TableEdgeInsetContext);
+  const edge = useContext(CellEdgeContext);
+  if (!inset || !edge) return null;
+  return {
+    ...cellEdgePadding(edge, inset, {
+      paddingHorizontal: own.paddingHorizontal ?? base.paddingHorizontal,
+      paddingLeft: own.paddingLeft,
+      paddingRight: own.paddingRight,
+    }),
+    "data-cell-edge": edge,
+  };
+}
+
 function ThemedCell({ children, style, ...props }: React.ComponentProps<typeof Cell>) {
   const { knobProps } = useResolvedKnobs();
   const motion = transitionProps(knobProps.motion.control);
+  const base = getTableCellPadding(sizeTokenStop(knobProps.sizeToken));
+  const edgePadding = useCellEdgePadding(props as Record<string, unknown>, base);
   return (
     <Cell
-      {...getTableCellPadding(sizeTokenStop(knobProps.sizeToken))}
+      {...base}
       {...motion}
       {...({ "data-animation": knobProps.motion.control.transition ? "on" : "none" } as Record<
         string,
         unknown
       >)}
       {...props}
+      {...edgePadding}
       // Compose (not replace) the inline style so a consumer style (e.g.
       // sticky pinned cells) keeps the verticalAlign baseline.
       style={[{ verticalAlign: "middle" }, style as any]}
@@ -833,15 +1042,18 @@ function ThemedCell({ children, style, ...props }: React.ComponentProps<typeof C
 function ThemedHeaderCell({ children, style, ...props }: React.ComponentProps<typeof HeaderCell>) {
   const { knobProps } = useResolvedKnobs();
   const motion = transitionProps(knobProps.motion.control);
+  const base = getTableCellPadding(sizeTokenStop(knobProps.sizeToken));
+  const edgePadding = useCellEdgePadding(props as Record<string, unknown>, base);
   return (
     <HeaderCell
-      {...getTableCellPadding(sizeTokenStop(knobProps.sizeToken))}
+      {...base}
       {...motion}
       {...({ "data-animation": knobProps.motion.control.transition ? "on" : "none" } as Record<
         string,
         unknown
       >)}
       {...props}
+      {...edgePadding}
       // Compose (not replace) the inline style so consumer styles (sticky
       // pinned headers) keep the real-<th> UA neutralizers (bold/centered).
       style={[{ verticalAlign: "middle", fontWeight: "normal", textAlign: "start" }, style as any]}

package/types/index.d.ts

@@ -4,6 +4,7 @@
  * Layer 1 only: depends on theme + Tamagui (no forms, no data-table).
  * Consumed by @multiplatform.one/table, @multiplatform.one/forms, etc.
  */
+import { type PhoneTableBleed } from "@multiplatform.one/theme";
 import type { SizeTokens } from "tamagui";
 export { TableCellContext, useIsInTableCell, useTableCellContext } from "./tableCellContext";
 export type { TableCellContextValue } from "./tableCellContext";
@@ -27,8 +28,8 @@ type AlignCells = {
 declare const Row: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    fullscreen?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
@@ -38,8 +39,8 @@ declare const Row: import("tamagui").TamaguiComponent<import("@tamagui/web").Tam
 declare const Cell: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    fullscreen?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
@@ -52,8 +53,8 @@ declare const Cell: import("tamagui").TamaguiComponent<import("@tamagui/web").Ta
 declare const HeaderCell: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    fullscreen?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
@@ -67,11 +68,50 @@ export type TableZebraStripe = "off" | "even" | "odd";
 export declare function tableZebraStripe(tableZebra: unknown, index: number): TableZebraStripe;
 export declare function tableZebraFill(hostFill: unknown): `$color${number}`;
 export declare function tablePressFill(restFill: unknown): `$color${number}`;
+/** The gutter the cells of the enclosing table take at its edges, or null. */
+export declare function useTableEdgeInset(): string | null;
+/**
+ * Hands every row a full-bleed table's edge inset. Hosts that bleed their own
+ * outer frame (a scroll viewport around the Table) wrap custom rows in it;
+ * the Table primitive provides it itself.
+ */
+export declare function TableEdgeInset({ inset, children, }: {
+    inset: string | null;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Marks the first and last cells of a row that is not a Table.Row (a
+ * virtualized host's div rows) for the enclosing table's edge inset.
+ */
+export declare function TableEdgeCells({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * LC-146 recipe for one row of a full-bleed card or document list: no card
+ * chrome at the screen edge, a hairline between rows, and the gutter as the
+ * row's horizontal inset.
+ */
+export declare function phoneBleedRowProps(inset: string): {
+    readonly borderColor: "$borderColor";
+    readonly elevation: 0;
+    readonly shadowColor: "transparent";
+    readonly paddingLeft: string;
+    readonly paddingRight: string;
+    readonly borderBottomWidth: number;
+    readonly className: "mp-hairline-b";
+    readonly borderRadius: 0;
+    readonly borderWidth: 0;
+};
+/** LC-146 recipe for a full-bleed list frame: out to the screen edges, rows abut. */
+export declare function phoneBleedListProps(bleed: Pick<PhoneTableBleed, "frame"> | null): {
+    readonly gap: 0;
+    readonly marginHorizontal?: string | undefined;
+};
 declare const TableBody: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    fullscreen?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
@@ -80,8 +120,8 @@ declare const TableBody: import("tamagui").TamaguiComponent<import("@tamagui/web
 declare const TableHead: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    fullscreen?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
@@ -90,8 +130,8 @@ declare const TableHead: import("tamagui").TamaguiComponent<import("@tamagui/web
 declare const TableFoot: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    fullscreen?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
@@ -109,8 +149,8 @@ declare const TableCaption: import("tamagui").TamaguiComponent<import("@tamagui/
 declare const TableComp: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
     circular?: boolean | undefined;
+    fullscreen?: boolean | undefined;
     elevate?: boolean | undefined;
     bordered?: boolean | undefined;
     chromeless?: boolean | "all" | undefined;
@@ -153,6 +193,13 @@ export interface ThemedTableProps extends Omit<React.ComponentProps<typeof Table
     size?: SizeTokens;
     /** Size key every cell's Surface forwards to its content. Default `size`, else `$3`. */
     cellSize?: SizeTokens;
+    /**
+     * LC-146: the gutter each row's first and last cell take as their inset
+     * when the table runs edge to edge below `$sm`. Omitted, a Table on the page
+     * line bleeds itself; a host that bleeds its own outer frame (a scroll
+     * viewport) passes the inset; null keeps the table inside the gutter.
+     */
+    edgeInset?: string | null;
 }
 declare function ThemedTableComp({ size, cellSize, ...props }: ThemedTableProps): import("react/jsx-runtime").JSX.Element;
 declare function ThemedTableBody({ children, ...props }: React.ComponentProps<typeof TableBody>): import("react/jsx-runtime").JSX.Element;
@@ -169,8 +216,8 @@ export declare const Table: typeof ThemedTableComp & {
     Foot: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {
         elevation?: number | SizeTokens | undefined;
         transparent?: boolean | undefined;
-        fullscreen?: boolean | undefined;
         circular?: boolean | undefined;
+        fullscreen?: boolean | undefined;
         elevate?: boolean | undefined;
         bordered?: boolean | undefined;
         chromeless?: boolean | "all" | undefined;

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}