@recursica/mantine-adapter 0.42.1 → 0.44.0

package/src/components/Stepper/Stepper.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Stepper.module.css";
@@ -30,28 +31,34 @@ const _Stepper = forwardRef<HTMLDivElement, StepperProps>(
     } = props;
 
     const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    const mergedClassNames = mergeClassNames(
+      {
+        steps: styles.steps,
+        step: styles.step,
+        stepIcon: styles.stepIcon,
+        stepCompletedIcon: styles.stepCompletedIcon,
+        stepBody: styles.stepBody,
+        stepLabel: styles.stepLabel,
+        stepDescription: styles.stepDescription,
+        separator: styles.separator,
+        verticalSeparator: styles.verticalSeparator,
+        content: styles.content,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     return (
       <MantineStepper
         ref={ref}
+        {...(sanitizedProps as MantineStepperProps)}
         orientation={orientation}
         className={`${styles.root} ${orientation === "horizontal" ? styles.horizontal : styles.vertical} ${size === "large" ? styles.large : styles.small} ${className || ""}`}
         style={style as React.CSSProperties}
         data-size={size}
         data-orientation={orientation}
-        classNames={{
-          steps: styles.steps,
-          step: styles.step,
-          stepIcon: styles.stepIcon,
-          stepCompletedIcon: styles.stepCompletedIcon,
-          stepBody: styles.stepBody,
-          stepLabel: styles.stepLabel,
-          stepDescription: styles.stepDescription,
-          separator: styles.separator,
-          verticalSeparator: styles.verticalSeparator,
-          content: styles.content,
-        }}
-        {...(sanitizedProps as MantineStepperProps)}
+        classNames={mergedClassNames}
       />
     );
   },

package/src/components/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, type CSSProperties } from "react";
 import {
   Switch as MantineSwitch,
   type SwitchProps as MantineSwitchProps,
@@ -9,6 +9,10 @@ import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  withCallerOverride,
+  mergeClassNames,
+  mergeStyles,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import {
@@ -59,50 +63,42 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       controlMinWidth,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    // 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 = [
+      "size", // Recursica controls sizing via Switch.module.css variables, not Mantine's native size scale.
+      "color", // Colors are token-driven via Switch.module.css; Mantine's native palette isn't exposed.
+      "radius", // Corner radius is fixed by Recursica tokens in Switch.module.css, not caller-configurable.
+      "variant", // Switch has a single Recursica-defined visual treatment; Mantine's variant isn't exposed.
+    ] as const satisfies readonly (keyof MantineSwitchProps)[];
+
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Actively delete dimension bindings that bypass the abstraction
-    delete restRecord["size"];
-    delete restRecord["color"];
-    delete restRecord["radius"];
-    delete restRecord["variant"];
-
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      body: styles.body,
-      track: styles.track,
-      thumb: styles.thumb,
-      trackLabel: styles.trackLabel,
-      labelWrapper: styles.labelWrapper,
-      label: styles.label,
-    };
-
-    const classNamesProp = restRecord.classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-      mergedClassNames.body = o.body ? `${styles.body} ${o.body}` : styles.body;
-      mergedClassNames.track = o.track
-        ? `${styles.track} ${o.track}`
-        : styles.track;
-      mergedClassNames.thumb = o.thumb
-        ? `${styles.thumb} ${o.thumb}`
-        : styles.thumb;
-      mergedClassNames.trackLabel = o.trackLabel
-        ? `${styles.trackLabel} ${o.trackLabel}`
-        : styles.trackLabel;
-      mergedClassNames.labelWrapper = o.labelWrapper
-        ? `${styles.labelWrapper} ${o.labelWrapper}`
-        : styles.labelWrapper;
-      mergedClassNames.label = o.label
-        ? `${styles.label} ${o.label}`
-        : styles.label;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        body: styles.body,
+        track: styles.track,
+        thumb: styles.thumb,
+        trackLabel: styles.trackLabel,
+        labelWrapper: styles.labelWrapper,
+        label: styles.label,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
+
+    // Recursica has no default per-slot inline styles here (all default styling comes from
+    // Switch.module.css above) — this only exists so a caller-supplied `styles` prop (permitted
+    // once overStyled=true clears filterStylingProps) merges in per-slot instead of needing its
+    // own passthrough path.
+    const mergedStyles = mergeStyles(
+      {} as Record<string, CSSProperties | undefined>,
+      restRecord.styles as Partial<Record<string, CSSProperties>> | undefined,
+    );
 
     const classNameProp = restRecord.className as string | undefined;
     const finalClass = classNameProp
@@ -147,12 +143,16 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     const switchNode = (
       <MantineSwitch
         ref={ref}
+        {...(sanitizedProps as unknown as MantineSwitchProps)}
         className={finalClass}
         classNames={mergedClassNames}
+        styles={mergedStyles}
         disabled={readOnly || disabled}
         data-disabled={readOnly || disabled || undefined}
-        thumbIcon={thumbIcon ?? FinalThumbIcon}
-        {...(sanitizedProps as unknown as MantineSwitchProps)}
+        thumbIcon={withCallerOverride<React.ReactNode>(
+          FinalThumbIcon,
+          thumbIcon,
+        )}
       />
     );
 

package/src/components/Switch/SwitchGroup.tsx

@@ -7,6 +7,7 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -61,11 +62,17 @@ export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
       defaultValue,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
+    // 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 = [
+      "size", // Recursica controls sizing via Switch.module.css variables, not Mantine's native size scale.
+    ] as const satisfies readonly (keyof MantineSwitchGroupProps)[];
 
-    // Delete prohibited sizing hooks from bypassing the variables
-    delete restRecord["size"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     return (
       <WithReadOnlyWrapper

package/src/components/Table/Table.tsx

@@ -38,8 +38,8 @@ const TableBase = forwardRef<HTMLTableElement, TableProps>(function Table(
   return (
     <MantineTable
       ref={ref}
-      className={finalClass}
       {...(sanitizedProps as unknown as MantineTableProps)}
+      className={finalClass}
     />
   );
 });

package/src/components/Tabs/Tabs.tsx

@@ -8,6 +8,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Tabs.module.css";
@@ -30,21 +31,27 @@ const _Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {
   } = props;
 
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames = mergeClassNames(
+    {
+      list: styles.list,
+      tab: styles.tab,
+      panel: styles.panel,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   return (
     <MantineTabs
       ref={ref}
+      {...(sanitizedProps as MantineTabsProps)}
       variant={variant}
       orientation={orientation}
       className={`${styles.root} ${className || ""}`}
       data-variant={variant}
       data-orientation={orientation}
-      classNames={{
-        list: styles.list,
-        tab: styles.tab,
-        panel: styles.panel,
-      }}
-      {...(sanitizedProps as MantineTabsProps)}
+      classNames={mergedClassNames}
     />
   );
 });

package/src/components/Text/Text.tsx

@@ -31,8 +31,8 @@ const _Text = forwardRef<HTMLDivElement, TextProps>(function Text(
   return (
     <MantineText
       ref={ref}
-      className={mergedClassName}
       {...(sanitizedProps as unknown as MantineTextProps)}
+      className={mergedClassName}
     />
   );
 });

package/src/components/TextArea/TextArea.tsx

@@ -6,6 +6,8 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -28,6 +30,14 @@ export interface RecursicaTextAreaProps
 
 export type TextAreaProps = RecursicaOverStyled<RecursicaTextAreaProps>;
 
+// 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 = [
+  "size", // Recursica controls sizing via the `size` variant + design tokens, not raw dimensions.
+  "variant", // Colors/variants are token-driven; the library's native palette isn't exposed.
+  "radius", // Recursica does not expose the library's native corner-radius system.
+] as const satisfies readonly (keyof MantineTextareaProps)[];
+
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   function TextArea(props, ref) {
     const {
@@ -58,34 +68,20 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       defaultValue,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
-
     // Securely map core native blocks down ensuring nested CSS modules map precisely
-    const mergedClassNames: Partial<Record<string, string>> = {
-      wrapper: styles.root, // The nested Input internal relative wrapper bounding box
-      input: styles.input,
-    };
-
-    const classNamesProp = restRecord.classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.wrapper = o.wrapper
-        ? `${styles.root} ${o.wrapper}`
-        : styles.root;
-      mergedClassNames.input = o.input
-        ? `${styles.input} ${o.input}`
-        : styles.input;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+        input: styles.input,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     const wrapperClass = className
       ? `${styles.layoutOverride} ${className}`

package/src/components/TextField/TextField.tsx

@@ -3,6 +3,8 @@ import { Input, type InputProps, type InputWrapperProps } from "@mantine/core";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -30,6 +32,14 @@ export interface RecursicaTextFieldProps
 
 export type TextFieldProps = RecursicaOverStyled<RecursicaTextFieldProps>;
 
+// 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 = [
+  "size", // Recursica controls sizing via the `size` variant + design tokens, not raw dimensions.
+  "variant", // Colors/variants are token-driven; the library's native palette isn't exposed.
+  "radius", // Recursica does not expose the library's native corner-radius system.
+] as const satisfies readonly (keyof InputProps)[];
+
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   function TextField(props, ref) {
     const {
@@ -60,38 +70,21 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       defaultValue,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
-
     // Securely map core native blocks down ensuring nested CSS modules map precisely
-    const mergedClassNames: Partial<Record<string, string>> = {
-      wrapper: styles.root, // The nested Input internal relative wrapper bounding box
-      input: styles.input,
-      section: styles.section,
-    };
-
-    const classNamesProp = restRecord.classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.wrapper = o.wrapper
-        ? `${styles.root} ${o.wrapper}`
-        : styles.root;
-      mergedClassNames.input = o.input
-        ? `${styles.input} ${o.input}`
-        : styles.input;
-      mergedClassNames.section = o.section
-        ? `${styles.section} ${o.section}`
-        : styles.section;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+        input: styles.input,
+        section: styles.section,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     const wrapperClass = className
       ? `${styles.layoutOverride} ${className}`
@@ -127,6 +120,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
           <Input
             ref={ref}
+            {...(sanitizedProps as unknown as InputProps)}
             classNames={mergedClassNames}
             disabled={disabled}
             value={value}
@@ -135,7 +129,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
               "data-disabled": disabled ? "true" : undefined,
               "data-error": error ? "true" : undefined,
             }}
-            {...(sanitizedProps as unknown as InputProps)}
           />
         }
       />

package/src/components/TimePicker/TimePicker.tsx

@@ -7,6 +7,8 @@ import { type InputWrapperProps } from "@mantine/core";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -102,6 +104,14 @@ export interface RecursicaTimePickerProps
 
 export type TimePickerProps = RecursicaOverStyled<RecursicaTimePickerProps>;
 
+// 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 = [
+  "size", // Recursica controls sizing via the `size` variant + design tokens, not raw dimensions.
+  "variant", // Colors/variants are token-driven; the library's native palette isn't exposed.
+  "radius", // Recursica does not expose the library's native corner-radius system.
+] as const satisfies readonly (keyof MantineTimePickerProps)[];
+
 export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
   function TimePicker(props, ref) {
     const {
@@ -137,13 +147,12 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
       ...rest
     } = props;
 
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
-
     // Internal full 24-hour value. Needed because Mantine's TimePicker (hour/minute/second entry)
     // and our own BareDropdown (AM/PM) both mutate the same conceptual value — see
     // TIMEPICKER_IMPLEMENTATION_NOTES.md.
@@ -241,12 +250,18 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
           >
             <MantineTimePicker
               ref={ref}
-              classNames={{
-                wrapper: styles.timeWrapper,
-                input: styles.timeInput,
-                fieldsGroup: styles.fieldsGroup,
-                field: styles.timeField,
-              }}
+              {...(sanitizedProps as unknown as MantineTimePickerProps)}
+              classNames={mergeClassNames(
+                {
+                  wrapper: styles.timeWrapper,
+                  input: styles.timeInput,
+                  fieldsGroup: styles.fieldsGroup,
+                  field: styles.timeField,
+                },
+                restRecord.classNames as
+                  | Partial<Record<string, string>>
+                  | undefined,
+              )}
               disabled={disabled}
               value={internalValue}
               onChange={handleFieldChange}
@@ -259,7 +274,6 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
               // to seed the mount-time AM default onto Mantine's own hidden native select. See
               // TIMEPICKER_IMPLEMENTATION_NOTES.md.
               amPmRef={amPmRef}
-              {...(sanitizedProps as unknown as MantineTimePickerProps)}
             />
             <BareDropdown
               overStyled

package/src/components/Timeline/Timeline.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Timeline.module.css";
@@ -46,36 +47,21 @@ interface TimelineComponent
 const TimelineInner = React.forwardRef<HTMLDivElement, TimelineProps>(
   function Timeline({ overStyled = false, ...rest }, ref) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-    };
-
-    const classNamesProp = (sanitizedProps as Record<string, unknown>)
-      .classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Record<string, string>;
-      Object.keys(o).forEach((key) => {
-        if (mergedClassNames[key]) {
-          mergedClassNames[key] = `${mergedClassNames[key]} ${o[key]}`;
-        } else {
-          mergedClassNames[key] = o[key];
-        }
-      });
-    }
+    const mergedClassNames = mergeClassNames(
+      { root: styles.root },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     return (
       <MantineTimeline
         ref={ref}
-        classNames={mergedClassNames}
         {...(sanitizedProps as unknown as Omit<
           MantineTimelineProps,
           "color" | "radius" | "bulletSize" | "lineWidth"
         >)}
+        classNames={mergedClassNames}
       />
     );
   },

package/src/components/Timeline/TimelineItem.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Timeline.module.css";
@@ -36,31 +37,18 @@ export const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
     ref,
   ) {
     const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      item: styles.item,
-      itemBody: styles.itemBody,
-      itemContent: styles.itemContent,
-      itemBullet: styles.itemBullet,
-      itemTitle: styles.itemTitle,
-    };
-
-    const classNamesProp = (sanitizedProps as Record<string, unknown>)
-      .classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Record<string, string>;
-      Object.keys(o).forEach((key) => {
-        if (mergedClassNames[key]) {
-          mergedClassNames[key] = `${mergedClassNames[key]} ${o[key]}`;
-        } else {
-          mergedClassNames[key] = o[key];
-        }
-      });
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        item: styles.item,
+        itemBody: styles.itemBody,
+        itemContent: styles.itemContent,
+        itemBullet: styles.itemBullet,
+        itemTitle: styles.itemTitle,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     // Embed timestamp inside children if provided, wrapped in a specific class
     const content = timestamp ? (
@@ -75,12 +63,12 @@ export const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
     return (
       <MantineTimelineItem
         ref={ref}
-        classNames={mergedClassNames}
-        data-variant={bulletVariant}
         {...(sanitizedProps as unknown as Omit<
           MantineTimelineItemProps,
           "radius" | "color" | "lineVariant"
         >)}
+        classNames={mergedClassNames}
+        data-variant={bulletVariant}
       >
         {content}
       </MantineTimelineItem>

package/src/components/Title/Title.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 
@@ -21,7 +22,16 @@ export const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
   { overStyled = false, order = 1, ...rest },
   ref,
 ) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
+  // 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 = [
+    "size", // Recursica controls Title sizing via the `order` prop + typography tokens, not Mantine's native `size`.
+  ] as const satisfies readonly (keyof MantineTitleProps)[];
+
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;
 
@@ -33,9 +43,9 @@ export const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
   return (
     <MantineTitle
       ref={ref}
+      {...(sanitizedProps as unknown as MantineTitleProps)}
       order={order}
       className={mergedClassName}
-      {...(sanitizedProps as unknown as MantineTitleProps)}
     />
   );
 });