@recursica/mantine-adapter 0.44.0 → 0.45.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.44.0",
+  "version": "0.45.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",
@@ -94,8 +94,8 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@recursica/adapter-common": "*",
-    "@recursica/official-release": "*"
+    "@recursica/adapter-common": "^0.20.0",
+    "@recursica/official-release": "^2.8.0"
   },
   "peerDependencies": {
     "@mantine/core": "^8.0.0",

package/src/components/Link/IMPLEMENTATION_NOTES.md

@@ -2,7 +2,7 @@
 
 ## States in Design Tokens
 
-The design tokens (`recursica_variables_scoped.css`) provide the base link styling directly on `--recursica_ui-kit_components_link_properties_*` (no distinct `default` state), plus a `visited` variant that overrides only `colors_text-color`/`colors_icon-color`. There is no per-state token for `hover` anymore (a prior schema version had one); the component currently applies no distinct hover treatment beyond the browser's native `cursor: pointer`. There are no tokens for `active` or `focus` either; the component relies on the browser's default focus outline for accessibility unless overridden by a global reset.
+The design tokens (`recursica_variables_scoped.css`) provide the base link styling directly on `--recursica_ui-kit_components_link_properties_*` (no distinct `default` state), plus a `visited` variant that overrides only `colors_text-color`/`colors_icon-color`. Hover is not a per-component `link_variants_states_hover_*` token; it's driven by the brand-level `--recursica_brand_states_link_decoration` token (resolves to `underline`), applied on `.root:hover`. Earlier this token was exported as an invalid quoted string (`"underline"`), which silently failed and was mistaken for the token not existing at all — now fixed upstream to a bare keyword. There are no tokens for `active` or `focus` either; the component relies on the browser's default focus outline for accessibility unless overridden by a global reset.
 
 ## Overriding Mantine's underline Prop
 

package/src/components/Link/Link.module.css

@@ -51,6 +51,10 @@ HARDCODED VALUES:
   );
 }
 
+.root:hover {
+  text-decoration: var(--recursica_brand_states_link_decoration);
+}
+
 /* Icon Support */
 .iconWrapper {
   /* HARDCODE: maintain intrinsic icon bounds */

package/src/components/Table/TABLE_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,67 @@
+# Table — Implementation Notes (Internal)
+
+## Background
+
+Table.module.css already had full CSS for header/cell/footer sorted, disabled, currency, and
+selected states, keyed off `data-sorted`/`data-disabled`/`data-currency`/`data-selected`
+attributes — but nothing in Table.tsx ever set those attributes, so the states were unreachable
+and their tokens showed as "unused" in the token analyzer. This pass adds the props that
+actually set them; it does not add any new CSS selectors for those states.
+
+## Why not the 4-component split from the Forge reference implementation
+
+Forge's Mantine Table reference (reviewed 2026-08-22) splits `Table`/`TableHeader`/`TableCell`/
+`TableFooter` into four separate top-level components, each computing CSS custom properties in
+JS and injecting them via inline `style`. We deliberately did not port that:
+
+- It bypasses `filterStylingProps`/`overStyled` and computes styling values in TSX instead of
+  referencing tokens directly in the CSS module — both are hard "no" per
+  `adapter-common/docs/COMPONENT_DEV_GUIDE.md` (§1 "No custom properties set from TSX for
+  styling", §3.1 `overStyled`/`filterStylingProps`).
+- It uses a `layer`-scoped token naming convention (`properties_colors_layer-0_...`) that
+  doesn't exist in this repo's tokens and isn't the sanctioned way to handle layers here (layer
+  is set only by wrapping in `<Layer>`, never a component prop — see the canonical guide's
+  "Layers" section).
+- Per direction from Matt (2026-08-22): keep the existing dot-notation composition
+  (`Table.Th`/`Table.Td`/`Table.Tr`/`Table.Tfoot`/etc., mirroring Mantine's own API) rather than
+  introducing new component names — "align with the underlying UI-kit's components, but style
+  with Recursica."
+
+Instead, `Table.Th`/`Table.Td`/`Table.Tr` gained real Recursica props (`sorted`, `disabled`,
+`variant`, `selected`) that set `data-*` attributes on themselves, activating the CSS that was
+already there.
+
+## Footer cells reuse `Table.Td`, not a new component
+
+There's no separate "footer cell" component. A `Table.Td` nested inside `Table.Tfoot` picks up
+the footer-specific CSS automatically via the existing `.root tfoot td` structural selector in
+Table.module.css — `variant="currency"` and `disabled` work identically whether the `Table.Td`
+is in `Table.Tbody` or `Table.Tfoot`.
+
+## Sort icon is rendered by `Table.Th` itself, not composed by the consumer
+
+Mantine's `Table` has no sortable-header primitive (unlike MUI's `TableSortLabel`), so
+`Table.Th` renders its own chevron (`Table.icons.tsx`, plain inline SVGs — no icon package
+dependency, same convention as `DatePicker.icons.tsx`) when `sorted` is `"asc"`/`"desc"`, sized
+via the existing `.sortIcon` CSS rule. Also sets `aria-sort` for accessibility (Mantine doesn't
+set this itself). This is intentionally asymmetric with `mui-adapter`, where sorting is composed
+via `Table.SortLabel` instead — see that adapter's own implementation notes.
+
+## Selectable rows (checkboxes)
+
+Neither Mantine's `Table` nor `@mui/material`'s `Table` has a built-in checkbox-driven row
+selection feature (confirmed 2026-08-22 — MUI's own docs treat it as a compose-it-yourself
+recipe with a plain `Checkbox`; the only MUI product with built-in selection is
+`@mui/x-data-grid`, not installed here). `Table.Tr`'s `selected` prop only controls the
+selected-row background/token state; wiring an actual checkbox column is a separate,
+not-yet-scoped ask.
+
+## Deliberately not changed
+
+- **No wrapper divs** — Forge wraps the table in two divs to get a scrollable bordered
+  container. The canonical guide forbids wrapper divs; `Table.ScrollContainer` (already wraps
+  Mantine's own `Table.ScrollContainer`) is the sanctioned way to get a scrolling table.
+- **Hover compositing, striping direction/row parity, row-padding semantics** — Forge diverges
+  from our current CSS on these (see the 2026-08-22 review), but none of them are confirmed
+  bugs vs. intentional design choices already baked into Figma's tokens. Left as-is; flag to
+  design if a change is wanted.

package/src/components/Table/Table.icons.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+/**
+ * Sort-direction indicators for `Table.Th`. Sized/colored entirely via the `.sortIcon` rule in
+ * Table.module.css (currentColor + the header's own text-color token) — no width/height/color
+ * hardcoded here on purpose, same convention as DatePicker.icons.tsx.
+ */
+export function ChevronUpIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    >
+      <polyline points="18 15 12 9 6 15" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}

package/src/components/Table/Table.stories.tsx

@@ -45,3 +45,96 @@ export const Default: Story = {
     );
   },
 };
+
+export const SortedColumn: Story = {
+  render: () => {
+    const sorted = [...elements].sort((a, b) => a.mass - b.mass);
+    const rows = sorted.map((element) => (
+      <Table.Tr key={element.name}>
+        <Table.Td>{element.position}</Table.Td>
+        <Table.Td>{element.name}</Table.Td>
+        <Table.Td>{element.symbol}</Table.Td>
+        <Table.Td>{element.mass}</Table.Td>
+      </Table.Tr>
+    ));
+
+    return (
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Element position</Table.Th>
+            <Table.Th>Element name</Table.Th>
+            <Table.Th>Symbol</Table.Th>
+            <Table.Th sorted="asc">Atomic mass</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>{rows}</Table.Tbody>
+      </Table>
+    );
+  },
+};
+
+export const SelectedAndDisabledRows: Story = {
+  render: () => (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Element position</Table.Th>
+          <Table.Th>Element name</Table.Th>
+          <Table.Th>Symbol</Table.Th>
+          <Table.Th>Atomic mass</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {elements.map((element, index) => (
+          <Table.Tr
+            key={element.name}
+            selected={index === 0}
+            disabled={index === elements.length - 1}
+          >
+            <Table.Td>{element.position}</Table.Td>
+            <Table.Td>{element.name}</Table.Td>
+            <Table.Td>{element.symbol}</Table.Td>
+            <Table.Td>{element.mass}</Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  ),
+};
+
+export const CurrencyColumnWithFooter: Story = {
+  render: () => {
+    const prices = [
+      { item: "Widget", price: 19.99 },
+      { item: "Gadget", price: 49.5 },
+      { item: "Gizmo", price: 9.25 },
+    ];
+    const total = prices.reduce((sum, row) => sum + row.price, 0);
+
+    return (
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Item</Table.Th>
+            <Table.Th>Price</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {prices.map((row) => (
+            <Table.Tr key={row.item}>
+              <Table.Td>{row.item}</Table.Td>
+              <Table.Td variant="currency">${row.price.toFixed(2)}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+        <Table.Tfoot>
+          <Table.Tr>
+            <Table.Td>Total</Table.Td>
+            <Table.Td variant="currency">${total.toFixed(2)}</Table.Td>
+          </Table.Tr>
+        </Table.Tfoot>
+      </Table>
+    );
+  },
+};

package/src/components/Table/Table.tsx

@@ -15,8 +15,14 @@ import {
   filterStylingProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
-import { type RecursicaTableProps } from "@recursica/adapter-common";
+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
@@ -80,45 +86,77 @@ export const TableTbody = forwardRef<HTMLTableSectionElement, TableTbodyProps>(
 );
 TableTbody.displayName = "TableTbody";
 
-export type TableTrProps = RecursicaOverStyled<MantineTableTrProps>;
+export type TableTrProps = RecursicaOverStyled<
+  Omit<MantineTableTrProps, "children"> & RecursicaTableRowProps
+>;
 
 export const TableTr = forwardRef<HTMLTableRowElement, TableTrProps>(
-  function TableTr({ overStyled = false, ...rest }, ref) {
+  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<MantineTableThProps>;
+export type TableThProps = RecursicaOverStyled<
+  Omit<MantineTableThProps, "children"> & RecursicaTableHeaderCellProps
+>;
 
 export const TableTh = forwardRef<HTMLTableCellElement, TableThProps>(
-  function TableTh({ overStyled = false, ...rest }, ref) {
+  function TableTh(
+    { overStyled = false, sorted = false, disabled = false, 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}
+        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<MantineTableTdProps>;
+export type TableTdProps = RecursicaOverStyled<
+  Omit<MantineTableTdProps, "children"> & RecursicaTableCellProps
+>;
 
 export const TableTd = forwardRef<HTMLTableCellElement, TableTdProps>(
-  function TableTd({ overStyled = false, ...rest }, ref) {
+  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}
       />
     );
   },

package/src/components/Table/USAGE.md

@@ -39,3 +39,38 @@ export default function Demo() {
 ```
 
 ---
+
+## 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.
+- **`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">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>
+```
+
+---