@recursica/mantine-adapter 0.44.0 → 0.46.0

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -5,7 +5,6 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
-  omitUnsupportedProps,
   mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
@@ -22,7 +21,7 @@ export type SegmentedControlProps = RecursicaOverStyled<
     | "color"
     | "classNames"
     | "className"
-    | "disabled"
+    | "data"
   > & {
     className?: string;
     classNames?: Partial<Record<string, string>>;
@@ -53,27 +52,39 @@ function useSegmentedControlClassNames(restRecord: Record<string, unknown>): {
 
 const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
   function SegmentedControl(
-    { overStyled = false, orientation = "horizontal", fullWidth, ...rest },
+    {
+      overStyled = false,
+      orientation = "horizontal",
+      fullWidth,
+      data = [],
+      ...rest
+    },
     ref,
   ) {
-    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
-    // through even if a caller forces them via plain JavaScript, bypassing the `Omit<>` above.
-    const UNSUPPORTED_PROPS = [
-      // SegmentedControl only supports per-item disabling via the `data` array (each item may set
-      // its own `disabled`); a top-level `disabled` is intentionally unsupported (typed as `never`
-      // in RecursicaSegmentedControlProps) because Mantine's top-level `disabled` would disable
-      // the whole control uniformly instead of per-item.
-      "disabled",
-    ] as const satisfies readonly (keyof MantineSegmentedControlProps)[];
-
-    const sanitizedProps = omitUnsupportedProps(
-      filterStylingProps(rest, overStyled) as Record<string, unknown>,
-      UNSUPPORTED_PROPS,
-    ) as Partial<typeof rest>;
+    const sanitizedProps = filterStylingProps(rest, overStyled) as Partial<
+      typeof rest
+    >;
     const restRecord = sanitizedProps as Record<string, unknown>;
 
     const stylingParams = useSegmentedControlClassNames(restRecord);
 
+    // Mantine's own data item has no icon slot; compose one into `label` (already a ReactNode)
+    // so Mantine's native innerLabel wrapper lays it out using the icon-size/gap tokens already
+    // wired in SegmentedControl.module.css.
+    const mappedData = data.map((item) =>
+      typeof item === "string" || !item.icon
+        ? item
+        : {
+            ...item,
+            label: (
+              <>
+                {item.icon}
+                {item.label}
+              </>
+            ),
+          },
+    );
+
     return (
       <MantineSegmentedControl
         ref={ref}
@@ -86,6 +97,7 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         orientation={orientation}
         fullWidth={fullWidth}
         data-orientation={orientation}
+        data={mappedData}
       />
     );
   },

package/src/components/SegmentedControl/USAGE.md

@@ -23,6 +23,17 @@ export default function Demo() {
 }
 ```
 
+Each `data` item may also be an object with an optional `icon`, rendered ahead of the label:
+
+```tsx
+<SegmentedControl
+  data={[
+    { value: "daily", label: "Daily", icon: <CheckIcon /> },
+    { value: "weekly", label: "Weekly" },
+  ]}
+/>
+```
+
 ---
 
 ## 3. Design System Integration
@@ -40,3 +51,5 @@ All Recursica components in the `@recursica/mantine-adapter` package adhere stri
 ## 4. Key Integration Features & Constraints
 
 The `variant`, `size`, `radius`, and `color` props are not available on this component, since appearance is fully controlled by the design system tokens. The active segment is shown as a floating indicator that moves behind the selected label, with a divider rendered between adjacent segments.
+
+A top-level `disabled` disables every item at once; an individual item can still be disabled on its own via `data[].disabled`.

package/src/components/Switch/SwitchGroup.tsx

@@ -19,7 +19,7 @@ import { type RecursicaSwitchGroupProps as BaseRecursicaSwitchGroupProps } from
 export interface RecursicaSwitchGroupProps
   extends Omit<
       MantineSwitchGroupProps,
-      "size" | "labelProps" | "defaultValue" | "value" | "onChange"
+      "size" | "labelProps" | "defaultValue" | "value"
     >,
     Omit<
       RecursicaFormControlWrapperProps,

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