@recursica/mantine-adapter 0.42.0 → 0.43.0

package/src/components/TimePicker/TimePicker.module.css

@@ -1,19 +1,3 @@
-/* EXEMPTIONS:
-   - state-specific border-size variables are ignored because a uniform border-size is applied
-     globally to prevent unexpected layout shift or flickering during disabled/error transitions.
-   - icon-size/icon-color/icon-text-gap have no equivalent here: the time field has no icon slot,
-     unlike TextField/DatePicker.
-   - placeholder-opacity has no direct equivalent: each SpinInput's native "--" placeholder is styled
-     by Mantine's own SpinInput internals, not a ::placeholder pseudo-element we can target directly. */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_disabled_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_icon-size */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_icon-text-gap */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_placeholder-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_properties_colors_icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_disabled_properties_colors_icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_time-picker_variants_states_error_properties_colors_icon-color */
-
 /* LAYOUT SPACING OVERRIDES:
    - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
 .layoutOverride {

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.module.css

@@ -1,9 +1,3 @@
-/* EXEMPTIONS:
-   - timeline-bullet_variants_types_avatar_properties_avatar-size is ignored because under the avatar timeline variant,
-     the bullet container size uses fallback bullet-size configurations to maintain vertical alignment with the 
-     inactive/active connector line, while the nested Avatar subcomponent handles its own sizing natively. */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_avatar-size */
-
 .root {
   display: flex;
   flex-direction: column;

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)}
     />
   );
 });

package/src/components/Toast/Toast.module.css

@@ -1,10 +1,3 @@
-/* EXEMPTIONS:
-   - elevation levels layer-1, layer-2, and layer-3 are ignored because all toasts explicitly use the standard 
-     layer-0 elevation shadow for styling consistency. */
-/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-1 */
-/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-2 */
-/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-3 */
-
 /* HARDCODED VALUES:
    - border-style: solid. Baseline so the per-variant border-color tokens actually render.
  */

package/src/components/Toast/Toast.tsx

@@ -5,6 +5,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Toast.module.css";
@@ -31,48 +33,47 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     },
     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 = [
+      "color", // Colors are token-driven via `data-variant`; Mantine's native palette isn't exposed.
+      "radius", // Toast corner radius is controlled by design tokens, not a raw radius prop.
+      "loading", // Toast never renders a loading state; always forced off via `loading={false}` below.
+    ] as const satisfies readonly (keyof MantineNotificationProps)[];
 
-    // Bind CSS module classes to Mantine's internal classNames API
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      body: styles.body,
-      title: styles.title,
-      description: styles.description,
-      closeButton: styles.closeButton,
-      icon: styles.icon,
-      loader: styles.loader,
-    };
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
 
-    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];
-        }
-      });
-    }
+    // Bind CSS module classes to Mantine's internal classNames API
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        body: styles.body,
+        title: styles.title,
+        description: styles.description,
+        closeButton: styles.closeButton,
+        icon: styles.icon,
+        loader: styles.loader,
+      },
+      (sanitizedProps as Record<string, unknown>).classNames as
+        | Partial<Record<string, string>>
+        | undefined,
+    );
 
     return (
       <MantineNotification
         ref={ref}
+        {...(sanitizedProps as unknown as Omit<
+          MantineNotificationProps,
+          "color" | "radius" | "variant" | "loading"
+        >)}
         withCloseButton={withCloseButton}
         withBorder={false} // Border is handled via CSS or tokens if needed
         data-variant={variant}
         classNames={mergedClassNames}
         loading={false}
-        {...(sanitizedProps as unknown as Omit<
-          MantineNotificationProps,
-          "color" | "radius" | "variant" | "loading"
-        >)}
       />
     );
   },

package/src/components/Tooltip/Tooltip.module.css

@@ -1,12 +1,3 @@
-/* EXEMPTIONS:
-   - beak-inset is ignored because Tooltip positioning calculations are handled dynamically by Mantine/Floating UI at the React runtime.
-   - beak-size is ignored because Mantine's tooltip arrows compute their sizing and positional offsets
-     dynamically within the React rendering engine (requires inline pixel number rather than standard CSS variables).
-     The beak size is checked in JS against a fixed value of 16px. If this variable changes, the TSX components
-     need to be reviewed/re-compiled. */
-/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-inset = 8px */
-/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-size = 16px */
-
 /* HARDCODED VALUES:
    - border-style: solid. Structural rendering rule for the tooltip border (Mantine uses Box
      which may not set border-style natively). Same pattern as Menu / HoverCard.

package/src/components/Tooltip/Tooltip.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Tooltip.module.css";
@@ -43,55 +44,38 @@ export type TooltipProps = RecursicaOverStyled<
 const TooltipBase = function Tooltip({
   overStyled = false,
   withBeak = true,
+  position = "top", // Recursica default; Mantine defaults to "bottom"
+  // arrowSize must be a JS number prop — Mantine uses it for inline width/height
+  // and positioning offset (-arrowSize/2) calculations that cannot be CSS-driven.
+  // Default to 16 to match the Recursica beak-size token (16px).
+  arrowSize = 16,
   ...rest
 }: TooltipProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   // Bind CSS module classes to Mantine's internal classNames API
-  const mergedClassNames: Partial<Record<string, string>> = {
-    tooltip: styles.tooltip,
-    arrow: styles.arrow,
-  };
-
-  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];
-      }
-    });
-  }
-
-  // arrowSize must be a JS number prop — Mantine uses it for inline width/height
-  // and positioning offset (-arrowSize/2) calculations that cannot be CSS-driven.
-  // Default to 16 to match the Recursica beak-size token (16px).
-  const arrowSize =
-    ((sanitizedProps as Record<string, unknown>).arrowSize as
-      | number
-      | undefined) ?? 16;
+  const mergedClassNames = mergeClassNames(
+    {
+      tooltip: styles.tooltip,
+      arrow: styles.arrow,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   // Resolve withBeak (Recursica) vs withArrow (Mantine).
   // withBeak takes precedence when both are provided.
-  const withArrow = (sanitizedProps as Record<string, unknown>).withArrow as
-    | boolean
-    | undefined;
+  const withArrow = restRecord.withArrow as boolean | undefined;
   const resolvedWithArrow = withBeak ?? withArrow;
 
   return (
     <MantineTooltip
-      position="top" /* Recursica default; Mantine defaults to "bottom" */
-      multiline /* Always allow text wrapping within max-width */
+      {...(sanitizedProps as unknown as MantineTooltipProps)}
+      position={position}
       arrowSize={arrowSize}
       withArrow={resolvedWithArrow}
+      multiline /* Always allow text wrapping within max-width */
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantineTooltipProps)}
     />
   );
 };

package/src/components/TransferList/TransferList.module.css

@@ -1,11 +1,3 @@
-/* EXEMPTIONS:
-   - border-size variables are ignored because a uniform 1px border is applied globally to prevent
-     unexpected layout shift or flickering during disabled/error state transitions (same exemption
-     TextArea takes). */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_disabled_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_transfer-list_variants_states_error_properties_border-size */
-
 /* TOKEN INTERPRETATION NOTES (see TRANSFERLIST_IMPLEMENTATION_NOTES.md):
    - `properties_gap` is applied to the row that holds [source pane, transfer buttons, target pane] —
      it's the only unnested gap the schema defines at the component's own level.

package/src/components/TransferList/TransferList.tsx

@@ -346,10 +346,10 @@ export const TransferList = forwardRef<HTMLDivElement, TransferListProps>(
         readOnlyNativeProps={props}
         activeComponent={
           <div
+            {...(sanitizedProps as Record<string, unknown>)}
             className={styles.root}
             data-disabled={disabled ? "true" : undefined}
             data-error={error ? "true" : undefined}
-            {...(sanitizedProps as Record<string, unknown>)}
           >
             <div className={styles.panes}>
               {renderPane(

package/src/components/Tree/Tree.tsx

@@ -8,6 +8,7 @@ import {
 import { useMergedRef } from "@mantine/hooks";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaTreeProps } from "@recursica/adapter-common";
@@ -186,8 +187,8 @@ export const Tree = forwardRef<HTMLUListElement, TreeProps>(function Tree(
   }, [disabled]);
   const mergedRef = useMergedRef(ref, rootRef);
 
-  const classNameProp = (sanitizedProps as Record<string, unknown>)
-    .className as string | undefined;
+  const restRecord = sanitizedProps as Record<string, unknown>;
+  const classNameProp = restRecord.className as string | undefined;
   const rootClass = classNameProp
     ? `${styles.root} ${classNameProp}`
     : styles.root;
@@ -195,6 +196,7 @@ export const Tree = forwardRef<HTMLUListElement, TreeProps>(function Tree(
   return (
     <MantineTree
       ref={mergedRef}
+      {...(sanitizedProps as unknown as Record<string, unknown>)}
       data={data}
       tree={tree}
       expandOnClick={false}
@@ -202,12 +204,10 @@ export const Tree = forwardRef<HTMLUListElement, TreeProps>(function Tree(
       expandOnSpace={false}
       renderNode={createRenderTreeNode(disabled)}
       data-disabled={disabled || undefined}
-      classNames={{
-        root: rootClass,
-        node: styles.node,
-        subtree: styles.subtree,
-      }}
-      {...(sanitizedProps as unknown as Record<string, unknown>)}
+      classNames={mergeClassNames(
+        { root: rootClass, node: styles.node, subtree: styles.subtree },
+        restRecord.classNames as Partial<Record<string, string>> | undefined,
+      )}
     />
   );
 });

package/src/utils/filterStylingProps.ts

@@ -67,6 +67,10 @@ export {
   type BlockedStylingKeys,
   type ForbiddenStyles,
   type WithRecursicaSpacing,
+  omitUnsupportedProps,
+  withCallerOverride,
+  mergeClassNames,
+  mergeStyles,
 } from "@recursica/adapter-common";
 
 const LAYOUT_PROPS = new Set([