@recursica/mantine-adapter 0.43.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.43.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/Breadcrumb/Breadcrumb.module.css

@@ -23,4 +23,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Neutralize Mantine's built-in margin-inline (--mantine-spacing-xs default) so .root's gap alone controls spacing */
+  margin-inline: 0;
 }

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -56,12 +56,6 @@ export const Default: Story = {
   },
 };
 
-export const StaticExample: Story = {
-  args: {
-    items: ["Store", "Electronics", "Computers", "Laptops"],
-  },
-};
-
 export const CustomSeparator: Story = {
   args: {
     items: ["Root", "Branch", "Leaf"],

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -35,6 +35,21 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
         | undefined,
     );
 
+    // Mantine's Breadcrumbs, unlike MUI's, doesn't hide the separator from screen
+    // readers by default — it's a plain text node. Match MUI's built-in aria-hidden,
+    // letting a caller override it via attributes.separator["aria-hidden"] if needed.
+    const callerAttributes = (sanitizedProps as Record<string, unknown>)
+      .attributes as
+      | Partial<Record<string, Record<string, unknown>>>
+      | undefined;
+    const mergedAttributes = {
+      ...callerAttributes,
+      separator: {
+        "aria-hidden": true,
+        ...callerAttributes?.separator,
+      },
+    };
+
     const classNameProp = (sanitizedProps as Record<string, unknown>)
       .className as string | undefined;
     const finalClass = classNameProp
@@ -47,6 +62,7 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
         {...(sanitizedProps as unknown as MantineBreadcrumbsProps)}
         className={finalClass}
         classNames={mergedClassNames}
+        attributes={mergedAttributes}
       />
     );
   },

package/src/components/Dropdown/DROPDOWN_IMPLEMENTATION_NOTES.md

@@ -5,3 +5,5 @@ The `Dropdown` component is mapped explicitly to Mantine's `<Select>` following
 1. **Naked Primitive Mapping:** Mantine's `Select` natively executes macro-label generation. To decouple it, we explicitly disable internal labels (`label={undefined}`) and inject it purely inside our generic `FormControlWrapper`.
 2. **Strict Dropdown Design Tokens:** The adapter implements strictly sandboxed styling utilizing only `--recursica_ui-kit_components_dropdown_...` variables. It explicitly does NOT inherit general `text-field` tokens despite geometric similarities, ensuring dropdown menus can be themed independently.
 3. **Dropdown Appendages:** To correctly map Mantine's detached Popover `.dropdown` and list `.option` items, we targeted focus and geometric bindings appending standard padding structures matched to the dropdown height overrides dynamically into our `Dropdown.module.css`.
+4. **Popup Vertical Padding:** The gap above/below the option list inside `.dropdown` is explicitly set from the same `--recursica_..._dropdown_properties_vertical-padding` token the closed control uses — it was previously left to Mantine's own untokenized `--combobox-padding` (4px) default.
+5. **Clear Button Styling:** Mantine's native clear button (`clearButtonProps`, shown when `clearable` + a value are both present) is a bare `CloseButton` with its own hardcoded gray icon/hover styling by default. `Dropdown.tsx` merges in a `.clearButton` class (Dropdown.module.css) that overrides it with the same icon-size/trailing-icon-color/focus-ring tokens as the rest of the right section, using the double-class-selector specificity trick (same as Chip.module.css's `.root.root`) to beat Mantine's own CSS module rule without `!important`.

package/src/components/Dropdown/Dropdown.module.css

@@ -169,6 +169,39 @@
   );
 }
 
+/* Mantine's own clear button (rendered via `clearButtonProps`, see Dropdown.tsx) is a bare
+   `CloseButton` by default — its own module CSS hardcodes a gray icon color and a circular gray
+   hover background, neither of which is Recursica-token-driven. The double class selector (same
+   specificity-boosting trick as Chip.module.css's `.root.root`) beats that default without
+   needing `!important`. Same icon-size/trailing-icon tokens as the rest of this section, same
+   focus-visible ring technique as Chip's own `.removeIcon` — the established inline icon-button
+   pattern elsewhere in this adapter. */
+.clearButton.clearButton {
+  width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  min-width: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  min-height: var(--recursica_ui-kit_components_dropdown_properties_icon-size);
+  border-radius: 50%;
+  background: transparent;
+  color: var(
+    --recursica_ui-kit_components_dropdown_properties_colors_trailing-icon
+  );
+  outline: none;
+}
+
+.clearButton.clearButton:hover {
+  background: transparent;
+}
+
+.clearButton.clearButton:focus-visible {
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
+}
+
 /* -------------------------------------
    STATE CASCADE ARCHITECTURE
 -------------------------------------- */
@@ -254,6 +287,17 @@
     --recursica_ui-kit_components_dropdown_properties_border-radius
   );
   overflow: hidden;
+
+  /* The visible top/bottom gap before/after the option list was previously left to Mantine's own
+     untokenized `--combobox-padding` default (4px) — wire it to the same dropdown vertical-padding
+     token the closed control itself uses instead (mirrors the mui-adapter fix to the equivalent
+     gap there, which came from MUI's own untokenized 8px `.MuiList-padding` default). */
+  padding-top: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_dropdown_properties_vertical-padding
+  );
 }
 
 .option {
@@ -277,10 +321,8 @@
   cursor: pointer;
 }
 
-/* No per-option selected/hovered tokens exist in the schema; use the generic overlay tint
-   (same technique as Table's row hover) to highlight the active option. */
-.option[data-selected="true"],
-.option[data-combobox-selected="true"],
+/* No per-option hovered token exists in the schema; use the generic overlay tint (same technique
+   as Table's row hover) to highlight a hovered-but-not-selected option. */
 .option[data-hovered="true"],
 .option:hover {
   background-color: color-mix(
@@ -290,3 +332,18 @@
     transparent
   );
 }
+
+/* No dedicated dropdown-option "selected" token exists in the schema either, but the menu-item
+   component's selected-state colors are the closest real token family for the same concept (a
+   selected row in a list) — reused here rather than the neutral hover tint above, which is what
+   previously made the selected option read as grey instead of Recursica's brand color. Matches
+   the mui-adapter fix for the same gap. */
+.option[data-selected="true"],
+.option[data-combobox-selected="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_text-color
+  );
+}

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -65,6 +65,27 @@ export const SearchableClearable: Story = {
   },
 };
 
+export const WithLeadingIcon: Story = {
+  args: {
+    label: "Destination",
+    leftSection: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+        <circle cx="12" cy="10" r="3"></circle>
+      </svg>
+    ),
+  },
+};
+
 export const StaticError: Story = {
   args: {
     error: "You must choose a valid destination.",

package/src/components/Dropdown/Dropdown.tsx

@@ -68,6 +68,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       value,
       defaultValue,
       data,
+      clearButtonProps,
       ...rest
     } = props;
     const sanitizedProps = omitUnsupportedProps(
@@ -76,6 +77,21 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
+    // Mantine's own clear button (rendered when `clearable` + a value are both present) otherwise
+    // renders unstyled — bare `CloseButton` defaults, no Recursica icon-button treatment. Merge in
+    // our own class (see `.clearButton` in Dropdown.module.css) alongside anything the caller
+    // already passed, same merge shape as `mergeClassNames` but for a single `className` string
+    // rather than a per-slot classNames map.
+    const consumerClearButtonProps = clearButtonProps as
+      | Record<string, unknown>
+      | undefined;
+    const mergedClearButtonProps = {
+      ...consumerClearButtonProps,
+      className: consumerClearButtonProps?.className
+        ? `${styles.clearButton} ${consumerClearButtonProps.className as string}`
+        : styles.clearButton,
+    };
+
     // Securely map core native blocks down ensuring nested CSS modules map precisely
     const mergedClassNames = mergeClassNames(
       {
@@ -139,6 +155,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             value={value}
             defaultValue={defaultValue}
             data={(data as unknown as MantineSelectProps["data"]) || []}
+            clearButtonProps={mergedClearButtonProps}
             label={undefined}
             description={undefined}
             error={undefined}

package/src/components/Dropdown/USAGE.md

@@ -45,3 +45,4 @@ All Recursica components in the `@recursica/mantine-adapter` package adhere stri
 ## 4. Notes
 
 - `Dropdown` is styled independently from `TextField`; even though they look similar, they are themed using separate design tokens.
+- Pass `leftSection` for a leading icon, and `clearable` (with a value present) to show a clear button — both render using the dropdown's own icon-color tokens.

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/Menu/Menu.stories.tsx

@@ -199,7 +199,9 @@ export const Default: Story = {
     position: "bottom-start",
     withArrow: false,
     offset: 5,
-    opened: undefined,
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
@@ -230,6 +232,9 @@ export const Default: Story = {
 export const WithDisabledItems: Story = {
   args: {
     position: "bottom-start",
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {
@@ -258,6 +263,9 @@ export const WithSubmenus: Story = {
   args: {
     position: "bottom-start",
     width: 200,
+    // Rendered open by default so this story is diffable against the MUI adapter
+    // without an interaction step.
+    opened: true,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: MenuStoryArgs) => {

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>
+```
+
+---