@recursica/mantine-adapter 0.33.0 → 0.34.0

package/src/components/Table/Table.tsx

@@ -2,6 +2,14 @@ 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,
@@ -38,23 +46,152 @@ const TableBase = forwardRef<HTMLTableElement, TableProps>(function Table(
 
 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<MantineTableTrProps>;
+
+export const TableTr = forwardRef<HTMLTableRowElement, TableTrProps>(
+  function TableTr({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Tr
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableTrProps)}
+      />
+    );
+  },
+);
+TableTr.displayName = "TableTr";
+
+export type TableThProps = RecursicaOverStyled<MantineTableThProps>;
+
+export const TableTh = forwardRef<HTMLTableCellElement, TableThProps>(
+  function TableTh({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Th
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableThProps)}
+      />
+    );
+  },
+);
+TableTh.displayName = "TableTh";
+
+export type TableTdProps = RecursicaOverStyled<MantineTableTdProps>;
+
+export const TableTd = forwardRef<HTMLTableCellElement, TableTdProps>(
+  function TableTd({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTable.Td
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTableTdProps)}
+      />
+    );
+  },
+);
+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 MantineTable.Thead;
-  Tbody: typeof MantineTable.Tbody;
-  Tr: typeof MantineTable.Tr;
-  Th: typeof MantineTable.Th;
-  Td: typeof MantineTable.Td;
-  Tfoot: typeof MantineTable.Tfoot;
-  Caption: typeof MantineTable.Caption;
-  ScrollContainer: typeof MantineTable.ScrollContainer;
+  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 = MantineTable.Thead;
-Table.Tbody = MantineTable.Tbody;
-Table.Tr = MantineTable.Tr;
-Table.Th = MantineTable.Th;
-Table.Td = MantineTable.Td;
-Table.Tfoot = MantineTable.Tfoot;
-Table.Caption = MantineTable.Caption;
-Table.ScrollContainer = MantineTable.ScrollContainer;
+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

@@ -39,13 +39,3 @@ export default function Demo() {
 ```
 
 ---
-
-## 3. Design System Integration
-
-All Recursica components in the `@recursica/mantine-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
-
-> [!IMPORTANT]
->
-> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
-> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
-> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,8 @@
+import { forwardRef } from "react";
 import {
   Tooltip as MantineTooltip,
   type TooltipProps as MantineTooltipProps,
+  type TooltipFloatingProps as MantineTooltipFloatingProps,
 } from "@mantine/core";
 import {
   filterStylingProps,
@@ -95,15 +97,37 @@ const TooltipBase = function Tooltip({
 };
 TooltipBase.displayName = "Tooltip";
 
+// ============================================================
+// TOOLTIP.FLOATING
+// ============================================================
+
+export type TooltipFloatingProps =
+  RecursicaOverStyled<MantineTooltipFloatingProps>;
+
+export const TooltipFloating = forwardRef<HTMLDivElement, TooltipFloatingProps>(
+  function TooltipFloating({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineTooltip.Floating
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineTooltipFloatingProps)}
+      />
+    );
+  },
+);
+TooltipFloating.displayName = "TooltipFloating";
+
 // ============================================================
 // DOT NOTATION EXPORT
 // ============================================================
 
 type TooltipComponent = typeof TooltipBase & {
-  Floating: typeof MantineTooltip.Floating;
+  Floating: typeof TooltipFloating;
   Group: typeof MantineTooltip.Group;
 };
 
 export const Tooltip = TooltipBase as TooltipComponent;
-Tooltip.Floating = MantineTooltip.Floating;
+Tooltip.Floating = TooltipFloating;
+// Tooltip.Group has no styling props of its own (no `style`/`className`/BoxProps),
+// so re-exporting Mantine's implementation directly is not a styling-gate gap.
 Tooltip.Group = MantineTooltip.Group;