@recursica/mui-adapter 0.25.0 → 0.27.0

package/src/components/Menu/Menu.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Menu.module.css";
@@ -23,15 +24,22 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
+  const mergedClassNames = mergeClassNames(
+    {
+      paper: styles.dropdown,
+      list: styles.dropdown,
+    },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
+
   return (
     <MuiMenu
       ref={ref}
       {...(sanitizedProps as MuiMenuProps)}
       className={`${styles.dropdown} ${className || ""}`}
-      classes={{
-        paper: styles.dropdown,
-        list: styles.dropdown,
-      }}
+      classes={mergedClassNames}
     />
   );
 });
@@ -47,8 +55,8 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
     return (
       <MuiMenuItem
         ref={ref}
-        className={`${styles.item} ${className || ""}`}
         {...(sanitizedProps as MuiMenuItemProps)}
+        className={`${styles.item} ${className || ""}`}
       />
     );
   },
@@ -65,8 +73,8 @@ export const MenuDivider = forwardRef<HTMLHRElement, MenuDividerProps>(
     return (
       <MuiDivider
         ref={ref}
-        className={`${styles.divider} ${className || ""}`}
         {...(sanitizedProps as MuiDividerProps)}
+        className={`${styles.divider} ${className || ""}`}
       />
     );
   },

package/src/components/Modal/Modal.module.css

@@ -1,14 +1,3 @@
-/* EXEMPTIONS:
-   - content-style and header-style parent variables represent raw JSON styling objects rather than
-     direct CSS variables and cannot be applied directly in standard CSS files.
-     Sub-properties are fully and individually mapped to elements natively.
-   - header/footer background-color are ignored because .header/.footer are intentionally
-     transparent (inheriting .content's background), matching Panel's header/footer treatment. */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_content-style */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_header-style */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_footer-background-color */
-/* recursica-ignore: --recursica_ui-kit_components_modal_properties_colors_header-background-color */
-
 .root {
 }
 

package/src/components/Modal/Modal.tsx

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Modal.module.css";
@@ -58,6 +59,13 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
+  const mergedClassNames = mergeClassNames(
+    { paper: styles.inner },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
+
   let footer: React.ReactNode = null;
   const bodyChildren: React.ReactNode[] = [];
 
@@ -79,9 +87,7 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
       ref={ref}
       {...(sanitizedProps as MuiDialogProps)}
       className={`${styles.root} ${className || ""}`}
-      classes={{
-        paper: styles.inner,
-      }}
+      classes={mergedClassNames}
       open={
         opened ||
         ((sanitizedProps as Record<string, unknown>).open as boolean) ||
@@ -124,8 +130,8 @@ const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(
       <MuiDialogTitle
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
-        className={`${styles.title} ${className || ""}`}
         {...(sanitizedProps as MuiDialogTitleProps)}
+        className={`${styles.title} ${className || ""}`}
       />
     );
   },
@@ -174,11 +180,11 @@ const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(
             internalRef as React.MutableRefObject<HTMLDivElement | null>
           ).current = node as HTMLDivElement;
       }}
+      {...(sanitizedProps as MuiDialogContentProps)}
       onScroll={() => checkScroll()}
       data-scrolled-top={scrolledTop || undefined}
       data-scrolled-bottom={scrolledBottom || undefined}
       className={`${styles.content} ${styles.scrollArea} ${className || ""}`}
-      {...(sanitizedProps as MuiDialogContentProps)}
     >
       {children}
     </MuiDialogContent>
@@ -201,8 +207,8 @@ const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
       <MuiDialogActions
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
-        className={`${styles.footer} ${className || ""}`}
         {...(sanitizedProps as MuiDialogActionsProps)}
+        className={`${styles.footer} ${className || ""}`}
       />
     );
   },

package/src/components/NumberInput/NumberInput.module.css

@@ -1,10 +1,3 @@
-/* EXEMPTIONS:
-   - border-size variables are ignored because the input box uses a uniform static boundary to prevent
-     unexpected layout shifts or flickering when switching between focused, disabled, or error states. */
-/* recursica-ignore: --recursica_ui-kit_components_number-input_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_border-size */
-
 /* LAYOUT SPACING OVERRIDES:
    - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens.
    - Also sets the --number-input-control-{max,min}-width hooks consumed inline in NumberInput.tsx,

package/src/components/NumberInput/NumberInput.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";
@@ -73,22 +75,33 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       ...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 design tokens, not MUI's native small/medium size
+      "variant", // Recursica styles the naked input directly; MUI's standard/filled/outlined unused
+    ] as const satisfies readonly (keyof MuiNumberInputProps)[];
 
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    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>> = {
-      wrapper: styles.root, // The nested Input internal relative wrapper bounding box
-      input: styles.input,
-      section: styles.section,
-      controls: styles.controls,
-      control: styles.control,
-    };
+    // Securely map core native blocks down ensuring nested CSS modules map precisely. This
+    // previously always overwrote the caller's `classes` prop wholesale (no merge at all) —
+    // now merged per-slot via mergeClassNames so a caller-supplied slot value extends rather
+    // than replaces ours.
+    const mergedClassNames = mergeClassNames(
+      {
+        wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+        input: styles.input,
+        section: styles.section,
+        controls: styles.controls,
+        control: styles.control,
+      },
+      restRecord.classes as Partial<Record<string, string>> | undefined,
+    );
 
     const wrapperClass = className
       ? `${styles.layoutOverride} ${className}`
@@ -138,7 +151,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           <MuiNumberInput
             ref={ref}
             {...(sanitizedProps as unknown as MuiNumberInputProps)}
-            classes={mergedClassNames}
+            classes={
+              mergedClassNames as unknown as MuiNumberInputProps["classes"]
+            }
             disabled={disabled}
             value={value}
             defaultValue={defaultValue}

package/src/components/Pagination/Pagination.module.css

@@ -1,84 +1,3 @@
-/* EXEMPTIONS:
-   - All pagination subcomponent properties (active-pages, inactive-pages, navigation-controls) are ignored
-     because we are not implementing custom subcomponent styling for pagination. Instead, pagination items
-     directly inherit the unified, standard brand button components for complete UI/UX consistency, rendering 
-     these generated subcomponent tokens redundant. */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_disabled-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_elevation */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_height */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-elevation */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_hover-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_icon */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_icon-text-gap */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_max-label-width */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_min-width */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-family */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-size */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-style */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_font-weight */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_letter-spacing */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_line-height */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_text-decoration */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_text_text-transform */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_text */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_active-pages_subcomponent_colors_text-hover */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_disabled-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_elevation */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_height */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-elevation */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_hover-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_icon */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_icon-text-gap */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_max-label-width */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_min-width */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-family */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-size */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-style */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_font-weight */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_letter-spacing */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_line-height */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_text-decoration */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_text_text-transform */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_text */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_inactive-pages_subcomponent_colors_text-hover */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_disabled-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_elevation */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_height */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_horizontal-padding */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-elevation */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_hover-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_icon */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_icon-text-gap */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_max-label-width */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_min-width */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-family */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-size */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-style */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_font-weight */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_letter-spacing */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_line-height */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_text-decoration */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_text_text-transform */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_background */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_border-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_text */
-/* recursica-ignore: --recursica_ui-kit_components_pagination_properties_navigation-controls_subcomponent_colors_text-hover */
-
 .root {
   display: flex;
   align-items: center;

package/src/components/Pagination/Pagination.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Pagination.module.css";
@@ -19,21 +20,10 @@ function usePaginationClassNames(restRecord: Record<string, unknown>): {
   className: string;
   classNames: Partial<Record<string, string>>;
 } {
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    ul: styles.ul,
-  };
-
-  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.ul = o.ul ? `${styles.ul} ${o.ul}` : styles.ul;
-  }
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root, ul: styles.ul },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp

package/src/components/Panel/Panel.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Panel.module.css";
@@ -63,30 +64,21 @@ const PanelBase = function Panel({
 }: PanelProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
-  // Bind CSS module classes to Mui'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];
-      }
-    });
-  }
+  // Bind CSS module classes to Mui's internal classNames API. Note MUI's actual prop is
+  // "classes", not "classNames" (that's Mantine's naming) — this used to read the wrong key,
+  // silently no-op-ing any caller-supplied classes.
+  const mergedClassNames = mergeClassNames(
+    {
+      content: styles.content,
+      header: styles.header,
+      title: wrapHeaderText ? styles.titleTruncate : styles.title,
+      body: styles.body,
+      inner: styles.inner,
+    },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   return (
     <MuiDrawer
@@ -94,7 +86,7 @@ const PanelBase = function Panel({
       keepMounted={keepMounted}
       open={Boolean(opened)}
       {...(sanitizedProps as unknown as MuiDrawerProps)}
-      classes={mergedClassNames}
+      classes={mergedClassNames as unknown as MuiDrawerProps["classes"]}
     />
   );
 };

package/src/components/Popover/Popover.module.css

@@ -13,11 +13,6 @@
      Popper/Tooltip behavior. We only override visual design tokens (colors, typography,
      spacing, borders).
 */
-/* EXEMPTIONS:
-   - beak-size is ignored here because Mui's Tooltip arrow is a fixed-size CSS shape
-     (1em / 0.71em, relative to the tooltip's own font-size) with no size prop of its own —
-     unlike Mantine, there is no JS/pixel hook to bind this token to. */
-/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_beak-size = 16px */
 
 /* ======================================
    DROPDOWN CONTAINER

package/src/components/Popover/Popover.tsx

@@ -11,6 +11,7 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Popover.module.css";
@@ -85,24 +86,15 @@ const PopoverBase = function Popover({
   );
 
   // Bind CSS module classes to Mui's internal classNames API
-  const mergedClassNames: Partial<Record<string, string>> = {
-    tooltip: styles.dropdown,
-    arrow: styles.arrow,
-  };
-
-  const classesProp = (sanitizedProps as Record<string, unknown>).classes;
-  if (
-    classesProp &&
-    typeof classesProp === "object" &&
-    !Array.isArray(classesProp)
-  ) {
-    const o = classesProp as Record<string, string>;
-    Object.keys(o).forEach((key) => {
-      mergedClassNames[key] = mergedClassNames[key]
-        ? `${mergedClassNames[key]} ${o[key]}`
-        : o[key];
-    });
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      tooltip: styles.dropdown,
+      arrow: styles.arrow,
+    },
+    (sanitizedProps as Record<string, unknown>).classes as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   const [internalOpened, setInternalOpened] = useState(defaultOpened);
   const isControlled = opened !== undefined;

package/src/components/Radio/Radio.tsx

@@ -7,6 +7,8 @@ import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import { RadioGroup } from "./RadioGroup";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import {
@@ -72,13 +74,19 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       style,
       ...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 design tokens, not MUI's native small/medium size
+      "color", // Colors are token-driven; MUI's native palette isn't exposed
+    ] as const satisfies readonly (keyof MuiRadioProps)[];
+
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Actively delete dimension bindings that bypass the abstraction
-    delete restRecord["size"];
-    delete restRecord["color"];
-
     // NOTE: MUI's actual prop is "classes", not "classNames" (that's Mantine's naming) — this
     // was reading the wrong key and silently doing nothing. Fixed. Also "body"/"inner"/"radio"/
     // "icon"/"labelWrapper"/"label" below were never real MUI `classes` slots (MUI's Radio only
@@ -89,27 +97,14 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     // only the label showed. Fixed by keeping only the real slots here and drawing the circle as
     // our own combined icon/checkedIcon node instead (see radioNode below), same pattern already
     // used by Checkbox.
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      checked: styles.checked,
-      disabled: styles.disabled,
-    };
-
-    const classesProp = restRecord.classes;
-    if (
-      classesProp &&
-      typeof classesProp === "object" &&
-      !Array.isArray(classesProp)
-    ) {
-      const o = classesProp as Partial<Record<string, string>>;
-      mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
-      mergedClassNames.checked = o.checked
-        ? `${styles.checked} ${o.checked}`
-        : styles.checked;
-      mergedClassNames.disabled = o.disabled
-        ? `${styles.disabled} ${o.disabled}`
-        : styles.disabled;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        checked: styles.checked,
+        disabled: styles.disabled,
+      },
+      restRecord.classes as Partial<Record<string, string>> | undefined,
+    );
 
     const classNameProp = restRecord.className as string | undefined;
     const finalClass = classNameProp

package/src/components/Radio/RadioGroup.tsx

@@ -73,11 +73,10 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       onChange,
       ...rest
     } = props;
+    // NOTE: MuiRadioGroupProps (via FormGroupProps) has no native "size" (or other
+    // Recursica-unsupported) prop to leak through here — nothing to add to an UNSUPPORTED_PROPS
+    // list beyond what filterStylingProps already blocks.
     const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
-
-    // Delete prohibited sizing hooks from bypassing the variables
-    delete restRecord["size"];
 
     return (
       <WithReadOnlyWrapper

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

@@ -9,14 +9,6 @@
      above that rule); needed because the item text-transform token has no valid scoped value
 */
 
-/* EXEMPTIONS:
-   - segmented-control-item_properties_item_border-radius is ignored because the item border-radius
-     is fully governed by the per-selection-state tokens (unselected/selected `properties_border-radius`,
-     already applied to `.label` and `.control:global(.Mui-selected)` below); this generic, state-agnostic radius
-     token has no distinct consumption site without conflicting with those state-specific overrides.
-     The Mantine reference adapter exempts this same variable for the same reason. */
-/* recursica-ignore: --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius */
-
 .root {
   background-color: var(
     --recursica_ui-kit_components_segmented-control_properties_colors_background-color

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -6,6 +6,8 @@ import {
 } from "@mui/material";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./SegmentedControl.module.css";
@@ -34,27 +36,14 @@ 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,
-  };
-
-  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;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      control: styles.control,
+      label: styles.label,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -77,11 +66,17 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     },
     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 = [
+      "disabled", // Recursica controls per-item disabled state via `data.disabled`, not the group
+    ] as const satisfies readonly (keyof MuiSegmentedControlProps)[];
 
-    // Explicitly prevent consumers from bypassing the disabled restriction
-    delete restRecord["disabled"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     const stylingParams = useSegmentedControlClassNames(restRecord);