@recursica/mantine-adapter 0.42.1 → 0.44.0

package/src/components/Pagination/Pagination.tsx

@@ -9,6 +9,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  withCallerOverride,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Pagination.module.css";
@@ -42,25 +44,14 @@ function usePaginationClassNames(restRecord: Record<string, unknown>): {
   className: string;
   classNames: Partial<Record<string, string>>;
 } {
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    control: styles.control,
-    dots: styles.dots,
-  };
-
-  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.dots = o.dots ? `${styles.dots} ${o.dots}` : styles.dots;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      control: styles.control,
+      dots: styles.dots,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -80,9 +71,9 @@ const _PaginationRoot = forwardRef<HTMLDivElement, PaginationRootProps>(
     return (
       <MantinePagination.Root
         ref={ref}
+        {...(sanitizedProps as MantinePaginationRootProps)}
         className={stylingParams.className}
         classNames={stylingParams.classNames}
-        {...(sanitizedProps as MantinePaginationRootProps)}
       />
     );
   },
@@ -97,13 +88,13 @@ const _PaginationNext = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
+  const computedIcon = withLabel ? NextWithLabel : undefined;
   return (
     <MantinePagination.Next
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -117,13 +108,13 @@ const _PaginationPrevious = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
+  const computedIcon = withLabel ? PrevWithLabel : undefined;
   return (
     <MantinePagination.Previous
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -137,13 +128,13 @@ const _PaginationFirst = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
+  const computedIcon = withLabel ? FirstWithLabel : undefined;
   return (
     <MantinePagination.First
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -157,13 +148,13 @@ const _PaginationLast = forwardRef<
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
-  const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
+  const computedIcon = withLabel ? LastWithLabel : undefined;
   return (
     <MantinePagination.Last
       ref={ref}
-      data-variant="text"
-      icon={renderIcon as any}
       {...sanitizedProps}
+      data-variant="text"
+      icon={withCallerOverride(computedIcon, icon) as any}
     />
   );
 });
@@ -201,11 +192,11 @@ const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
     return (
       <MantinePagination
         ref={ref}
+        {...labelsIcons}
+        {...(sanitizedProps as MantinePaginationProps)}
         className={stylingParams.className}
         classNames={stylingParams.classNames}
         getControlProps={mergedGetControlProps}
-        {...labelsIcons}
-        {...(sanitizedProps as MantinePaginationProps)}
       />
     );
   },

package/src/components/Panel/Panel.tsx

@@ -12,6 +12,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
+  withCallerOverride,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Panel.module.css";
@@ -68,38 +70,29 @@ const PanelBase = function Panel({
   ...rest
 }: PanelProps) {
   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>> = {
-    content: styles.content,
-    header: styles.header,
-    title: wrapHeaderText ? styles.titleTruncate : styles.title,
-    body: styles.body,
-    inner: styles.inner,
-  };
-
-  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(
+    {
+      content: styles.content,
+      header: styles.header,
+      title: wrapHeaderText ? styles.titleTruncate : styles.title,
+      body: styles.body,
+      inner: styles.inner,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   return (
     <MantineDrawer
+      {...(sanitizedProps as unknown as MantineDrawerProps)}
       position={placement} /* Recursica default: right; Mantine default: left */
       keepMounted={keepMounted}
-      closeOnClickOutside={rest.closeOnClickOutside ?? Boolean(rest.opened)}
-      {...(sanitizedProps as unknown as MantineDrawerProps)}
+      closeOnClickOutside={withCallerOverride(
+        Boolean(rest.opened),
+        rest.closeOnClickOutside,
+      )}
       classNames={mergedClassNames}
     />
   );
@@ -130,7 +123,7 @@ export const PanelFooter = forwardRef<HTMLDivElement, PanelFooterProps>(
       ? `${styles.footer} ${classNameProp}`
       : styles.footer;
 
-    return <div ref={ref} className={finalClassName} {...sanitizedProps} />;
+    return <div ref={ref} {...sanitizedProps} className={finalClassName} />;
   },
 );
 PanelFooter.displayName = "PanelFooter";

package/src/components/Popover/Popover.tsx

@@ -6,6 +6,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
+  withCallerOverride,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Popover.module.css";
@@ -47,54 +49,40 @@ export type PopoverProps = Omit<
 const PopoverBase = function Popover({
   overStyled = false,
   withBeak = true,
+  position = "top", // Recursica default; Mantine defaults to "bottom"
   ...rest
 }: PopoverProps) {
   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>> = {
-    dropdown: styles.dropdown,
-    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];
-      }
-    });
-  }
+  const mergedClassNames = mergeClassNames(
+    { dropdown: styles.dropdown, arrow: styles.arrow },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   // 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 arrowSize = withCallerOverride<number>(
+    16,
+    restRecord.arrowSize as number | 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 resolvedWithArrow = withBeak ?? withArrow;
+  const resolvedWithArrow = withCallerOverride<boolean | undefined>(
+    withBeak,
+    restRecord.withArrow as boolean | undefined,
+  );
 
   return (
     <MantinePopover
-      position="top" /* Recursica default; Mantine defaults to "bottom" */
+      {...(sanitizedProps as unknown as MantinePopoverProps)}
+      position={position}
       arrowSize={arrowSize}
       withArrow={resolvedWithArrow}
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantinePopoverProps)}
     />
   );
 };
@@ -133,8 +121,8 @@ const PopoverDropdown = function PopoverDropdown({
 
   return (
     <MantinePopover.Dropdown
-      className={classNameProp}
       {...(sanitizedProps as unknown as MantinePopoverDropdownProps)}
+      className={classNameProp}
     />
   );
 };

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>