@recursica/adapter-mantine-v8 1.0.0

package/src/components/Table/Table.tsx

@@ -0,0 +1,243 @@
+import { forwardRef } from "react";
+import {
+  Table as MantineTable,
+  type TableProps as MantineTableProps,
+  type TableTheadProps as MantineTableTheadProps,
+  type TableTbodyProps as MantineTableTbodyProps,
+  type TableTrProps as MantineTableTrProps,
+  type TableThProps as MantineTableThProps,
+  type TableTdProps as MantineTableTdProps,
+  type TableTfootProps as MantineTableTfootProps,
+  type TableCaptionProps as MantineTableCaptionProps,
+  type TableScrollContainerProps as MantineTableScrollContainerProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import {
+  type RecursicaTableProps,
+  type RecursicaTableRowProps,
+  type RecursicaTableHeaderCellProps,
+  type RecursicaTableCellProps,
+} from "@recursica/adapter-common";
+import styles from "./Table.module.css";
+import { ChevronUpIcon, ChevronDownIcon } from "./Table.icons";
+
+export type TableProps = RecursicaOverStyled<
+  MantineTableProps & RecursicaTableProps
+>;
+
+const TableBase = forwardRef<HTMLTableElement, TableProps>(function Table(
+  { overStyled = false, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+
+  const rootClass = styles.root;
+  const finalClass = classNameProp
+    ? `${rootClass} ${classNameProp}`
+    : rootClass;
+
+  return (
+    <MantineTable
+      ref={ref}
+      {...(sanitizedProps as unknown as MantineTableProps)}
+      className={finalClass}
+    />
+  );
+});
+
+TableBase.displayName = "Table";
+
+// ==== EXPLICIT DOT-NOTATION SUB-COMPONENTS ====
+// Each sub-component is wrapped independently so it goes through
+// filterStylingProps/overStyled the same way the root Table does.
+
+export type TableTheadProps = RecursicaOverStyled<MantineTableTheadProps>;
+
+export const TableThead = forwardRef<HTMLTableSectionElement, TableTheadProps>(
+  function TableThead({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Thead
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableTheadProps)}
+      />
+    );
+  },
+);
+TableThead.displayName = "TableThead";
+
+export type TableTbodyProps = RecursicaOverStyled<MantineTableTbodyProps>;
+
+export const TableTbody = forwardRef<HTMLTableSectionElement, TableTbodyProps>(
+  function TableTbody({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Tbody
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableTbodyProps)}
+      />
+    );
+  },
+);
+TableTbody.displayName = "TableTbody";
+
+export type TableTrProps = RecursicaOverStyled<
+  Omit<MantineTableTrProps, "children"> & RecursicaTableRowProps
+>;
+
+export const TableTr = forwardRef<HTMLTableRowElement, TableTrProps>(
+  function TableTr(
+    { overStyled = false, selected = false, disabled = false, ...rest },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Tr
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableTrProps)}
+        data-selected={selected ? "true" : undefined}
+        data-disabled={disabled ? "true" : undefined}
+      />
+    );
+  },
+);
+TableTr.displayName = "TableTr";
+
+export type TableThProps = RecursicaOverStyled<
+  Omit<MantineTableThProps, "children"> & RecursicaTableHeaderCellProps
+>;
+
+export const TableTh = forwardRef<HTMLTableCellElement, TableThProps>(
+  function TableTh(
+    {
+      overStyled = false,
+      sorted = false,
+      disabled = false,
+      variant = "default",
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Th
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableThProps)}
+        data-sorted={sorted ? "true" : undefined}
+        data-disabled={disabled ? "true" : undefined}
+        data-currency={variant === "currency" ? "true" : undefined}
+        aria-sort={
+          sorted === "asc"
+            ? "ascending"
+            : sorted === "desc"
+              ? "descending"
+              : undefined
+        }
+      >
+        {children}
+        {sorted === "asc" && <ChevronUpIcon className={styles.sortIcon} />}
+        {sorted === "desc" && <ChevronDownIcon className={styles.sortIcon} />}
+      </MantineTable.Th>
+    );
+  },
+);
+TableTh.displayName = "TableTh";
+
+export type TableTdProps = RecursicaOverStyled<
+  Omit<MantineTableTdProps, "children"> & RecursicaTableCellProps
+>;
+
+export const TableTd = forwardRef<HTMLTableCellElement, TableTdProps>(
+  function TableTd(
+    { overStyled = false, disabled = false, variant = "default", ...rest },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Td
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableTdProps)}
+        data-disabled={disabled ? "true" : undefined}
+        data-currency={variant === "currency" ? "true" : undefined}
+      />
+    );
+  },
+);
+TableTd.displayName = "TableTd";
+
+export type TableTfootProps = RecursicaOverStyled<MantineTableTfootProps>;
+
+export const TableTfoot = forwardRef<HTMLTableSectionElement, TableTfootProps>(
+  function TableTfoot({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Tfoot
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableTfootProps)}
+      />
+    );
+  },
+);
+TableTfoot.displayName = "TableTfoot";
+
+export type TableCaptionProps = RecursicaOverStyled<MantineTableCaptionProps>;
+
+export const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  TableCaptionProps
+>(function TableCaption({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MantineTable.Caption
+      ref={ref}
+      {...(sanitizedProps as unknown as MantineTableCaptionProps)}
+    />
+  );
+});
+TableCaption.displayName = "TableCaption";
+
+export type TableScrollContainerProps =
+  RecursicaOverStyled<MantineTableScrollContainerProps>;
+
+export const TableScrollContainer = forwardRef<
+  HTMLDivElement,
+  TableScrollContainerProps
+>(function TableScrollContainer({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MantineTable.ScrollContainer
+      ref={ref}
+      {...(sanitizedProps as unknown as MantineTableScrollContainerProps)}
+    />
+  );
+});
+TableScrollContainer.displayName = "TableScrollContainer";
+
+// ==== DOT NOTATION EXPORT ====
+
+type TableComponent = typeof TableBase & {
+  Thead: typeof TableThead;
+  Tbody: typeof TableTbody;
+  Tr: typeof TableTr;
+  Th: typeof TableTh;
+  Td: typeof TableTd;
+  Tfoot: typeof TableTfoot;
+  Caption: typeof TableCaption;
+  ScrollContainer: typeof TableScrollContainer;
+};
+
+export const Table = TableBase as TableComponent;
+Table.Thead = TableThead;
+Table.Tbody = TableTbody;
+Table.Tr = TableTr;
+Table.Th = TableTh;
+Table.Td = TableTd;
+Table.Tfoot = TableTfoot;
+Table.Caption = TableCaption;
+Table.ScrollContainer = TableScrollContainer;

package/src/components/Table/USAGE.md

@@ -0,0 +1,78 @@
+# Table - Usage Guide
+
+This document describes how to integrate and use the `Table` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Table } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from 'react';
+import { Table } from "@recursica/adapter-mantine-v8";
+
+export default function Demo() {
+  return (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Email</Table.Tr>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        <Table.Tr>
+          <Table.Td>Jane Doe</Table.Tr>
+          <Table.Td>jane@example.com</Table.Tr>
+        </Table.Tr>
+      </Table.Tbody>
+    </Table>
+  );
+}
+```
+
+---
+
+## 3. Row and Cell States
+
+- **`Table.Tr`**: `selected` applies the selected-row background; `disabled` dims the row and applies the disabled cell colors to every cell in it.
+- **`Table.Th`**: `sorted="asc" | "desc"` applies the sorted header style and renders the matching chevron icon; omit it (or pass `false`) for the unsorted style. `disabled` dims the header cell. `variant="currency"` right-aligns the header to match a currency column's value cells.
+- **`Table.Td`**: `variant="currency"` applies the currency text style (for numeric/monetary columns); `disabled` dims the cell.
+
+```tsx
+<Table>
+  <Table.Thead>
+    <Table.Tr>
+      <Table.Th>Name</Table.Th>
+      <Table.Th sorted="asc" variant="currency">
+        Balance
+      </Table.Th>
+    </Table.Tr>
+  </Table.Thead>
+  <Table.Tbody>
+    <Table.Tr selected>
+      <Table.Td>Jane Doe</Table.Td>
+      <Table.Td variant="currency">$1,204.50</Table.Td>
+    </Table.Tr>
+    <Table.Tr disabled>
+      <Table.Td>Inactive Account</Table.Td>
+      <Table.Td variant="currency">$0.00</Table.Td>
+    </Table.Tr>
+  </Table.Tbody>
+  <Table.Tfoot>
+    <Table.Tr>
+      <Table.Td>Total</Table.Td>
+      <Table.Td variant="currency">$1,204.50</Table.Td>
+    </Table.Tr>
+  </Table.Tfoot>
+</Table>
+```
+
+---

package/src/components/Tabs/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,27 @@
+# Tabs Implementation Notes
+
+## `inverted` never actually moved the tab list below the content (2026-08-30, source-of-truth audit)
+
+**Reported symptom:** in the `Inverted` story, content should render above the tab list (tabs
+below), with padding between them — the padding looked missing "when content is on top".
+
+**What was actually happening:** `inverted` is a real, native `@mantine/core` `Tabs` prop
+(confirmed by reading `@mantine/core`'s own `Tabs.cjs`/`Tabs.css`) — this adapter doesn't even
+reference it directly, it flows straight through `...rest` to `<MantineTabs>`. But Mantine's own
+`inverted` support only flips the active-indicator line and border-radius direction (top vs
+bottom) via `data-inverted` CSS selectors; it does not reposition `.list` below `.panel`. The
+story always renders `<Tabs.List>` before the `<Tabs.Panel>`s in JSX regardless of `inverted`, so
+"padding missing when content is on top" wasn't reproducible as such: content was never on top to
+begin with, before this fix.
+
+**Fix:** Mantine renders `Tabs.List`/`Tabs.Panel` as flat siblings directly under `.root` despite
+the nested JSX (confirmed via live DOM dump) — so making `.root[data-orientation="horizontal"]`
+a flex column and giving `.list` `order: 1` only when `[data-inverted]` reorders them visually
+with zero DOM changes, no compound-component internals to touch. Scoped to horizontal only —
+vertical's "instead of left" flip isn't exercised by any story. Also introduced a shared
+`--tabs-content-gap` custom property per variant (previously each variant inlined its own long
+token reference directly into `.list`'s `margin-bottom`) so the same gap can be redirected:
+`margin-bottom: 0; margin-top: var(--tabs-content-gap);` when inverted, since the gap now needs
+to land above the now-trailing tab list instead of below it. Verified live against mui-adapter's
+identical fix (see its own `Tabs/IMPLEMENTATION_NOTES.md`) — pixel-equivalent stacking order and
+gap; no regression on Default/Outline/Pills/Vertical stories.