@recursica/mantine-adapter 0.42.1 → 0.43.0

package/src/components/Radio/Radio.tsx

@@ -7,6 +7,9 @@ import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import { RadioGroup } from "./RadioGroup";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  withCallerOverride,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import {
@@ -64,55 +67,41 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       readOnly,
       readOnlyComponent,
       disabled,
+      icon,
       formLayout,
       labelSize,
       controlMaxWidth,
       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 Radio.module.css variables, not Mantine's native size scale.
+      "color", // Colors are token-driven via Radio.module.css; Mantine's native palette isn't exposed.
+      "radius", // Corner radius is fixed by Recursica tokens in Radio.module.css, not caller-configurable.
+      "variant", // Radio has a single Recursica-defined visual treatment; Mantine's variant isn't exposed.
+      "iconColor", // Icon color is token-driven via Radio.module.css, not a native Mantine override.
+    ] as const satisfies readonly (keyof MantineRadioProps)[];
+
+    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"];
-    delete restRecord["iconColor"];
-
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      body: styles.body,
-      inner: styles.inner,
-      radio: styles.radio,
-      icon: styles.icon,
-      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.inner = o.inner
-        ? `${styles.inner} ${o.inner}`
-        : styles.inner;
-      mergedClassNames.radio = o.radio
-        ? `${styles.radio} ${o.radio}`
-        : styles.radio;
-      mergedClassNames.icon = o.icon ? `${styles.icon} ${o.icon}` : styles.icon;
-      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,
+        inner: styles.inner,
+        radio: styles.radio,
+        icon: styles.icon,
+        labelWrapper: styles.labelWrapper,
+        label: styles.label,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     const classNameProp = restRecord.className as string | undefined;
     const finalClass = classNameProp
@@ -150,11 +139,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     const radioNode = (
       <MantineRadio
         ref={ref}
-        icon={RadioIcon}
+        {...(sanitizedProps as unknown as MantineRadioProps)}
+        icon={withCallerOverride<MantineRadioProps["icon"]>(RadioIcon, icon)}
         className={finalClass}
         classNames={mergedClassNames}
         disabled={readOnly || disabled}
-        {...(sanitizedProps as unknown as MantineRadioProps)}
       />
     );
 

package/src/components/Radio/RadioGroup.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 RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       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 Radio.module.css variables, not Mantine's native size scale.
+    ] as const satisfies readonly (keyof MantineRadioGroupProps)[];
 
-    // 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/ReadOnlyField/ReadOnlyField.tsx

@@ -100,10 +100,10 @@ export const ReadOnlyField = forwardRef<HTMLDivElement, ReadOnlyFieldProps>(
     return (
       <FormControlWrapper
         ref={ref}
+        {...(sanitizedProps as any)}
         overStyled={overStyled as true}
         className={wrapperClass}
         style={style}
-        {...(sanitizedProps as any)}
       >
         {content}
       </FormControlWrapper>

package/src/components/ReadOnlyField/ReadOnlyTextField.tsx

@@ -27,12 +27,12 @@ export const ReadOnlyTextField: React.FC<ReadOnlyTextFieldProps> = ({
   return (
     <Box
       component="p"
+      {...sanitizedProps}
       className={
         classNameProp
           ? `${styles.textField} ${classNameProp}`
           : styles.textField
       }
-      {...sanitizedProps}
     >
       {value != null
         ? React.isValidElement(value)

package/src/components/ReadOnlyField/WithReadOnlyWrapper.tsx

@@ -67,12 +67,12 @@ export const WithReadOnlyWrapper = forwardRef<
     return (
       <ReadOnlyField
         ref={ref}
+        {...wrapperProps}
         type={readOnlyType}
         value={readOnlyValue}
         emptyValueComponent={emptyValueComponent}
         onLabelEditClick={onLabelEditClick}
         overStyled={overStyled as true}
-        {...wrapperProps}
       />
     );
   }

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -5,6 +5,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./SegmentedControl.module.css";
@@ -31,31 +33,15 @@ function useSegmentedControlClassNames(restRecord: Record<string, unknown>): {
   className: string;
   classNames: Partial<Record<string, string>>;
 } {
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    control: styles.control,
-    label: styles.label,
-    indicator: styles.indicator,
-  };
-
-  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.control = o.control
-      ? `${styles.control} ${o.control}`
-      : styles.control;
-    mergedClassNames.label = o.label
-      ? `${styles.label} ${o.label}`
-      : styles.label;
-    mergedClassNames.indicator = o.indicator
-      ? `${styles.indicator} ${o.indicator}`
-      : styles.indicator;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      control: styles.control,
+      label: styles.label,
+      indicator: styles.indicator,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -70,26 +56,36 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     { overStyled = false, orientation = "horizontal", fullWidth, ...rest },
     ref,
   ) {
-    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 = [
+      // 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)[];
 
-    // Explicitly prevent consumers from bypassing the disabled restriction
-    delete restRecord["disabled"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     const stylingParams = useSegmentedControlClassNames(restRecord);
 
     return (
       <MantineSegmentedControl
         ref={ref}
+        {...(sanitizedProps as Omit<
+          MantineSegmentedControlProps,
+          "variant" | "size"
+        >)}
         className={stylingParams.className}
         classNames={stylingParams.classNames}
         orientation={orientation}
         fullWidth={fullWidth}
         data-orientation={orientation}
-        {...(sanitizedProps as Omit<
-          MantineSegmentedControlProps,
-          "variant" | "size"
-        >)}
       />
     );
   },

package/src/components/Slider/Slider.tsx

@@ -7,6 +7,8 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -133,51 +135,36 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       setInputValue(resolvedValue.toString());
     };
 
-    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 Slider.module.css variables, not Mantine's native size scale.
+      "variant", // Slider has a single Recursica-defined visual treatment; Mantine's variant isn't exposed.
+      "radius", // Corner radius is fixed by Recursica tokens in Slider.module.css, not caller-configurable.
+      // Not currently a real key of Mantine's SliderProps (that's an Input.Wrapper-only prop) — kept
+      // as a defensive no-op delete since it predates this consolidation and the public prop type
+      // already `Omit`s it; Recursica's own FormControlLayout/WithReadOnlyWrapper own wrapper markup.
+      "wrapperProps",
+    ] as const satisfies readonly (keyof MantineSliderProps | "wrapperProps")[];
 
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
-    delete restRecord["wrapperProps"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     // Securely map core native blocks down ensuring nested CSS modules map precisely
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.sliderRoot,
-      track: styles.sliderTrack,
-      bar: styles.sliderBar,
-      thumb: styles.sliderThumb,
-      mark: styles.sliderMark,
-      markLabel: styles.sliderMarkLabel,
-    };
-
-    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.sliderRoot} ${o.root}`
-        : styles.sliderRoot;
-      mergedClassNames.track = o.track
-        ? `${styles.sliderTrack} ${o.track}`
-        : styles.sliderTrack;
-      mergedClassNames.bar = o.bar
-        ? `${styles.sliderBar} ${o.bar}`
-        : styles.sliderBar;
-      mergedClassNames.thumb = o.thumb
-        ? `${styles.sliderThumb} ${o.thumb}`
-        : styles.sliderThumb;
-      mergedClassNames.mark = o.mark
-        ? `${styles.sliderMark} ${o.mark}`
-        : styles.sliderMark;
-      mergedClassNames.markLabel = o.markLabel
-        ? `${styles.sliderMarkLabel} ${o.markLabel}`
-        : styles.sliderMarkLabel;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.sliderRoot,
+        track: styles.sliderTrack,
+        bar: styles.sliderBar,
+        thumb: styles.sliderThumb,
+        mark: styles.sliderMark,
+        markLabel: styles.sliderMarkLabel,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     const wrapperClass = className
       ? `${styles.layoutOverride} ${className}`
@@ -232,6 +219,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
 
             <div className={styles.sliderTrackWrapper}>
               <MantineSlider
+                {...(sanitizedProps as unknown as MantineSliderProps)}
                 classNames={mergedClassNames}
                 disabled={disabled}
                 value={resolvedValue}
@@ -241,7 +229,6 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
                 max={max}
                 step={step}
                 label={tooltipLabel}
-                {...(sanitizedProps as unknown as MantineSliderProps)}
               />
             </div>
 

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