@recursica/mui-adapter 0.21.1 → 0.23.0

package/src/components/Group/Group.tsx

@@ -46,6 +46,7 @@ export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
   return (
     <MUIStack
       ref={ref}
+      {...safeProps}
       direction="row"
       flexWrap={wrap || "wrap"}
       justifyContent={justify}
@@ -55,7 +56,6 @@ export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
         ...(resolvedRowGap ? { rowGap: resolvedRowGap } : {}),
         ...(resolvedColumnGap ? { columnGap: resolvedColumnGap } : {}),
       }}
-      {...safeProps}
     >
       {children}
     </MUIStack>

package/src/components/HoverCard/HoverCard.tsx

@@ -85,6 +85,7 @@ const HoverCardBase = function HoverCard({
 
   return (
     <MuiTooltip
+      {...(sanitizedProps as unknown as Record<string, unknown>)}
       title={dropdownNode}
       placement={position as unknown as MuiTooltipProps["placement"]}
       arrow={withBeak}
@@ -104,7 +105,6 @@ const HoverCardBase = function HoverCard({
         },
       }}
       classes={mergedClassNames as unknown as MuiTooltipProps["classes"]}
-      {...(sanitizedProps as unknown as Record<string, unknown>)}
     >
       {/* Tooltip requires a single valid React element child that accepts a ref */}
       {isValidElement(targetNode) ? targetNode : <span>{targetNode}</span>}

package/src/components/Label/Label.module.css

@@ -48,6 +48,7 @@
 
 .innerLayout {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(
     --recursica_ui-kit_components_label_properties_label-optional-text-gap
@@ -74,8 +75,8 @@
   display: none !important;
 }
 
-/* MUI propagates .Mui-error to the label automatically on FormControl error. 
-   We explicitly override this bleed to prevent the main label text from turning red, 
+/* MUI propagates .Mui-error to the label automatically on FormControl error.
+   We explicitly override this bleed to prevent the main label text from turning red,
    while allowing the asterisk to take the error color! */
 .root:global(.Mui-error) {
   color: var(--recursica_ui-kit_components_label_properties_colors_text-color);
@@ -86,6 +87,15 @@
   );
 }
 
+/* Same bleed, different trigger: MUI's FormControl propagates .Mui-focused to this label
+   whenever any descendant form control (e.g. a grouped Switch/Checkbox) receives focus,
+   turning the whole label MUI's primary blue via InputLabel's own default styling. No
+   Recursica design calls for a focus-reactive label color, so it's reset here — same fix as
+   the .Mui-error case above, just for the focused trigger instead of the error one. */
+.root:global(.Mui-focused) {
+  color: var(--recursica_ui-kit_components_label_properties_colors_text-color);
+}
+
 .endNodes {
   display: flex;
   align-items: center;
@@ -95,6 +105,9 @@
 }
 
 .optionalText {
+  /* Forces the optional text onto its own row below the label text/end nodes,
+     mirroring mantine-adapter's flex-basis: 100% wrap behavior. */
+  flex-basis: 100%;
   color: inherit;
   font-family: var(
     --recursica_ui-kit_components_label_properties_optional-text_font-family

package/src/components/Label/Label.tsx

@@ -46,9 +46,9 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     return (
       <InputLabel
         ref={ref}
+        {...(sanitizedProps as InputLabelProps)}
         shrink={true}
         className={className ? `${styles.root} ${className}` : styles.root}
-        {...(sanitizedProps as InputLabelProps)}
       >
         <div className={styles.innerLayout}>
           <span className={styles.textWrapper}>
@@ -60,11 +60,6 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
             {labelActionArea && (
               <span className={styles.actionArea}>{labelActionArea}</span>
             )}
-            {!required && labelOptionalText && !labelActionArea && (
-              <span className={styles.optionalText}>
-                {labelOptionalText === true ? "Optional" : labelOptionalText}
-              </span>
-            )}
             {labelWithEditIcon && (
               <button
                 type="button"
@@ -76,6 +71,12 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
               </button>
             )}
           </div>
+
+          {!required && labelOptionalText && !labelActionArea && (
+            <span className={styles.optionalText}>
+              {labelOptionalText === true ? "(optional)" : labelOptionalText}
+            </span>
+          )}
         </div>
       </InputLabel>
     );

package/src/components/Menu/Menu.tsx

@@ -26,12 +26,12 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
   return (
     <MuiMenu
       ref={ref}
+      {...(sanitizedProps as MuiMenuProps)}
       className={`${styles.dropdown} ${className || ""}`}
       classes={{
         paper: styles.dropdown,
         list: styles.dropdown,
       }}
-      {...(sanitizedProps as MuiMenuProps)}
     />
   );
 });

package/src/components/Modal/Modal.tsx

@@ -77,11 +77,11 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
   return (
     <MuiDialog
       ref={ref}
+      {...(sanitizedProps as MuiDialogProps)}
       className={`${styles.root} ${className || ""}`}
       classes={{
         paper: styles.inner,
       }}
-      {...(sanitizedProps as MuiDialogProps)}
       open={
         opened ||
         ((sanitizedProps as Record<string, unknown>).open as boolean) ||

package/src/components/NumberInput/NumberInput.tsx

@@ -137,6 +137,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
           <MuiNumberInput
             ref={ref}
+            {...(sanitizedProps as unknown as MuiNumberInputProps)}
             classes={mergedClassNames}
             disabled={disabled}
             value={value}
@@ -154,7 +155,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
               step,
               ...(restRecord.inputProps as Record<string, unknown>),
             }}
-            {...(sanitizedProps as unknown as MuiNumberInputProps)}
           />
         }
       />

package/src/components/Pagination/Pagination.tsx

@@ -63,13 +63,13 @@ const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
     return (
       <div ref={ref} className={stylingParams.className}>
         <MuiPagination
+          {...(sanitizedProps as MuiPaginationProps)}
           count={total}
           showFirstButton={withEdges}
           showLastButton={withEdges}
           hidePrevButton={withControls === false ? true : undefined}
           hideNextButton={withControls === false ? true : undefined}
           classes={stylingParams.classNames}
-          {...(sanitizedProps as MuiPaginationProps)}
         />
       </div>
     );

package/src/components/Panel/Panel.tsx

@@ -124,7 +124,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/Radio/Radio.module.css

@@ -70,7 +70,7 @@
   );
 }
 
-.root .inner {
+.inner {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -82,7 +82,7 @@
     --recursica_ui-kit_components_radio-button-item_properties_text_font-size
   );
   /* Mathematically syncs the physical input radio bounding block visually with the center of the text's first line.
-     NOTE: Since the Figma line-height token resolves to an 'em' length (e.g. 1.05em), we CANNOT multiply it by font-size in CSS. 
+     NOTE: Since the Figma line-height token resolves to an 'em' length (e.g. 1.05em), we CANNOT multiply it by font-size in CSS.
      Instead, it naturally evaluates to the correct height because we applied the font-size above. */
   margin-top: calc(
     (
@@ -95,10 +95,16 @@
   );
 }
 
-/* Base explicit reset masking underlying framework defaults */
-.root .radio {
+/* Base explicit reset masking underlying framework defaults.
+   MUI's native <input type="radio"> stays invisible (SwitchBase overlays it with
+   opacity: 0) — it is not the visual circle. The circle is drawn by our own
+   icon/checkedIcon node (see Radio.tsx), a sibling of the input, so it's styled
+   here directly rather than through MUI's `classes` prop (MUI has no "radio" slot). */
+.radio {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer; /* HARDCODE: core interaction behavior */
-  appearance: none; /* HARDCODE: reset native widget */
   box-sizing: border-box; /* HARDCODE: ensures size includes borders */
   width: var(--recursica_ui-kit_components_radio-button_properties_size);
   height: var(--recursica_ui-kit_components_radio-button_properties_size);
@@ -121,7 +127,7 @@
 }
 
 /* Checked State */
-.root .radio:checked {
+.radioChecked {
   background-color: var(
     --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_background-color
   );
@@ -130,11 +136,14 @@
   );
 }
 
-/* Disabled State (colors now differ per selection state, so each combination is mapped explicitly) */
-.root .radio:disabled {
+/* Disabled State (colors now differ per selection state; MUI applies its `disabled`
+   classKey to the same root element as `root`, so `.root.disabled` targets the
+   actual disabled instance and cascades to the decorative icon div inside it —
+   mirrors Checkbox's split). */
+.root.disabled .radio {
   cursor: not-allowed; /* HARDCODE: disabled state default */
 }
-.root .radio:disabled:not(:checked) {
+.root.disabled .radio:not(.radioChecked) {
   opacity: var(
     --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_opacity
   );
@@ -145,7 +154,7 @@
     --recursica_ui-kit_components_radio-button_variants_selection-states_unselected_variants_states_disabled_properties_colors_border-color
   );
 }
-.root .radio:checked:disabled {
+.root.disabled .radioChecked {
   opacity: var(
     --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_opacity
   );
@@ -157,29 +166,32 @@
   );
 }
 
-.root .icon {
-  position: absolute;
-  inset: 0;
-  margin: auto;
+.icon {
   pointer-events: none;
   width: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
   height: var(--recursica_ui-kit_components_radio-button_properties_icon-size);
 }
 /* No icon-color token exists for the unselected state (no icon is visible then) */
-.root .radio:checked + .iconWrapper .icon,
-.root .radio:checked + .icon {
+.radioChecked .icon {
   color: var(
     --recursica_ui-kit_components_radio-button_variants_selection-states_selected_properties_colors_icon-color
   );
 }
-.root .radio:checked:disabled + .iconWrapper .icon,
-.root .radio:checked:disabled + .icon {
+.root.disabled .radioChecked .icon {
   color: var(
     --recursica_ui-kit_components_radio-button_variants_selection-states_selected_variants_states_disabled_properties_colors_icon-color
   );
 }
 
 .root .labelWrapper {
+  /* display: flex (not the browser default block) blockifies the native inline
+     <label> child per the CSS Display spec's flex-item blockification rule —
+     matches Mantine's own labelWrapper (inline-flex), whose flex context does
+     the same to its label. Without it, the label stays inline and its line box
+     picks up extra half-leading height, visually shifting it below vertical
+     center against the circle. */
+  display: flex;
+  flex-direction: column;
   padding: 0; /* HARDCODE: structural layout reset */
   margin: 0; /* HARDCODE: structural layout reset */
   flex: 1;
@@ -230,23 +242,6 @@
   );
 }
 
-.root .description {
-  margin-top: 5px; /* HARDCODE: mantine default */
-  color: #868e96; /* HARDCODE: mantine default dimmed */
-  font-size: 12px; /* HARDCODE: mantine default xs */
-  line-height: 1.2;
-}
-
-.root .error {
-  margin-top: 5px; /* HARDCODE: mantine default */
-  color: #fa5252; /* HARDCODE: mantine default error */
-  font-size: 12px; /* HARDCODE: mantine default xs */
-  line-height: 1.2;
-}
-
-.root .description[data-disabled="true"],
-.root .error[data-disabled="true"] {
-  opacity: var(
-    --recursica_ui-kit_components_radio-button-item_variants_states_disabled_properties_opacity
-  );
-}
+/* description/error text renders via AssistiveElement directly (see Radio.tsx) —
+   it owns its own tokenized styling. AssistiveElement has no disabled state and
+   must never dim. */

package/src/components/Radio/Radio.tsx

@@ -17,6 +17,7 @@ import {
   FormControlLayout,
   type FormControlLayoutProps,
 } from "../FormControlLayout/FormControlLayout";
+import { AssistiveElement } from "../AssistiveElement/AssistiveElement";
 
 import styles from "./Radio.module.css";
 
@@ -78,38 +79,36 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     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
+    // recognizes root/checked/disabled/colorPrimary/colorSecondary/sizeSmall, plus "input" from
+    // the underlying SwitchBase) — those slot names are Mantine's own Radio classNames API,
+    // copy-pasted over verbatim. Since none of them existed as real slots, MUI silently dropped
+    // them, so the circle (all its background/border CSS lived under `.radio`) never rendered —
+    // 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,
-      body: styles.body,
-      inner: styles.inner,
-      radio: styles.radio,
-      icon: styles.icon,
-      labelWrapper: styles.labelWrapper,
-      label: styles.label,
+      checked: styles.checked,
+      disabled: styles.disabled,
     };
 
-    const classNamesProp = restRecord.classNames;
+    const classesProp = restRecord.classes;
     if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
+      classesProp &&
+      typeof classesProp === "object" &&
+      !Array.isArray(classesProp)
     ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
+      const o = classesProp 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;
+      mergedClassNames.checked = o.checked
+        ? `${styles.checked} ${o.checked}`
+        : styles.checked;
+      mergedClassNames.disabled = o.disabled
+        ? `${styles.disabled} ${o.disabled}`
+        : styles.disabled;
     }
 
     const classNameProp = restRecord.className as string | undefined;
@@ -144,17 +143,28 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       return <>{roNode}</>;
     }
 
-    // We omit Mui's sizing/coloring so we rely strictly on variables from Radio.module.css
+    // MUI's icon/checkedIcon fully replace the visual (they're the only child SwitchBase
+    // renders alongside the invisible native input) — so the ring + dot both have to live in
+    // one combined node per state, same pattern as Checkbox's icon/checkedIcon divs.
+    // sanitizedProps spreads FIRST: these render-critical props (icon/checkedIcon/className/
+    // classes/disabled/disableRipple/sx) must win over anything of the same name coming through
+    // from the caller, or they'd silently clobber the exact rendering this component depends on.
     const radioNode = (
       <MuiRadio
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
-        icon={<RadioIcon />}
-        checkedIcon={<RadioIcon className={styles.checked} />}
-        className={finalClass}
+        {...(sanitizedProps as unknown as MuiRadioProps)}
+        icon={<div className={styles.radio} />}
+        checkedIcon={
+          <div className={`${styles.radio} ${styles.radioChecked}`}>
+            <RadioIcon className={styles.icon} />
+          </div>
+        }
+        className={!label ? `${finalClass} ${styles.inner}` : styles.inner}
         classes={mergedClassNames}
         disabled={readOnly || disabled}
-        {...(sanitizedProps as unknown as MuiRadioProps)}
+        disableRipple
+        sx={label ? { padding: 0 } : undefined}
       />
     );
 
@@ -170,27 +180,31 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
             >
               {label as React.ReactNode}
             </label>
-            {description && (
-              <div
-                className={styles.description}
-                data-disabled={readOnly || disabled ? true : undefined}
-              >
-                {description}
-              </div>
-            )}
-            {error && (
-              <div
-                className={styles.error}
-                data-disabled={readOnly || disabled ? true : undefined}
+            {/* description/error are mutually exclusive — error takes precedence */}
+            {error ? (
+              <AssistiveElement
+                assistiveVariant="error"
+                assistiveWithIcon={false}
               >
                 {error}
-              </div>
+              </AssistiveElement>
+            ) : (
+              description && (
+                <AssistiveElement
+                  assistiveVariant="help"
+                  assistiveWithIcon={false}
+                >
+                  {description}
+                </AssistiveElement>
+              )
             )}
           </div>
         </div>
       </div>
     ) : (
-      radioNode
+      <div className={finalClass} style={style as React.CSSProperties}>
+        {radioNode}
+      </div>
     );
 
     if (formLayout) {

package/src/components/Radio/RadioGroup.tsx

@@ -70,6 +70,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       emptyValueComponent,
       value,
       defaultValue,
+      onChange,
       ...rest
     } = props;
     const sanitizedProps = filterStylingProps(rest, overStyled);
@@ -111,6 +112,10 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
             {...(sanitizedProps as unknown as MuiRadioGroupProps)}
             value={value}
             defaultValue={defaultValue}
+            // MUI natively calls onChange(event, value); the Recursica contract is
+            // single-argument (value only), matching Mantine's native RadioGroup
+            // onChange (the cross-adapter source of truth) — normalize here.
+            onChange={onChange ? (_event, val) => onChange(val) : undefined}
             className={styles.groupRoot}
             data-layout={formLayout}
           >

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -98,13 +98,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-/* Mantine natively wraps label contents in an innerLabel span */
-.root .label :global(.mantine-SegmentedControl-innerLabel) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   gap: var(
     --recursica_ui-kit_components_segmented-control-item_properties_item_icon-text-gap
   );

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -38,7 +38,6 @@ function useSegmentedControlClassNames(restRecord: Record<string, unknown>): {
     root: styles.root,
     control: styles.control,
     label: styles.label,
-    indicator: styles.indicator,
   };
 
   const classNamesProp = restRecord.classNames;
@@ -55,9 +54,6 @@ function useSegmentedControlClassNames(restRecord: Record<string, unknown>): {
     mergedClassNames.label = o.label
       ? `${styles.label} ${o.label}`
       : styles.label;
-    mergedClassNames.indicator = o.indicator
-      ? `${styles.indicator} ${o.indicator}`
-      : styles.indicator;
   }
 
   const classNameProp = restRecord.className as string | undefined;
@@ -101,6 +97,10 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     return (
       <MuiSegmentedControl
         ref={ref}
+        {...(sanitizedProps as Omit<
+          MuiSegmentedControlProps,
+          "variant" | "size" | "value" | "onChange"
+        >)}
         className={stylingParams.className}
         classes={stylingParams.classNames}
         orientation={orientation}
@@ -113,10 +113,6 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
             typeof MuiSegmentedControl
           >["onChange"]
         }
-        {...(sanitizedProps as Omit<
-          MuiSegmentedControlProps,
-          "variant" | "size" | "value" | "onChange"
-        >)}
       >
         {data.map((item) => {
           const itemValue = typeof item === "string" ? item : item.value;

package/src/components/Slider/Slider.tsx

@@ -235,6 +235,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
 
             <div className={styles.sliderTrackWrapper}>
               <MuiSlider
+                {...(sanitizedProps as unknown as MuiSliderProps)}
                 classes={mergedClassNames}
                 disabled={disabled}
                 value={resolvedValue}
@@ -257,7 +258,6 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
                       ) => React.ReactNode)
                     : undefined
                 }
-                {...(sanitizedProps as unknown as MuiSliderProps)}
               />
             </div>
 

package/src/components/Stack/Stack.tsx

@@ -29,10 +29,10 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
   return (
     <MUIStack
       ref={ref}
+      {...safeProps}
       spacing={resolvedGap}
       alignItems={align}
       justifyContent={justify}
-      {...safeProps}
     >
       {children}
     </MUIStack>

package/src/components/Stepper/Stepper.tsx

@@ -48,6 +48,7 @@ export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
         <MuiStepper
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
+          {...(sanitizedProps as MuiStepperProps)}
           orientation={orientation}
           connector={
             <MuiStepConnector
@@ -62,7 +63,6 @@ export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
           classes={{
             root: styles.steps,
           }}
-          {...(sanitizedProps as MuiStepperProps)}
         />
       </div>
     );
@@ -79,9 +79,9 @@ export const Step = forwardRef<HTMLDivElement, StepProps>(
     return (
       <MuiStep
         ref={ref}
+        {...(filterStylingProps(rest, overStyled) as MuiStepProps)}
         classes={{ root: styles.step }}
         className={className || ""}
-        {...(filterStylingProps(rest, overStyled) as MuiStepProps)}
       />
     );
   },
@@ -116,6 +116,7 @@ export const StepLabel = forwardRef<HTMLDivElement, StepLabelProps>(
     return (
       <MuiStepLabel
         ref={ref}
+        {...(filterStylingProps(rest, overStyled) as MuiStepLabelProps)}
         className={className || ""}
         classes={{
           label: styles.stepLabel,
@@ -128,7 +129,6 @@ export const StepLabel = forwardRef<HTMLDivElement, StepLabelProps>(
             rest.optional
           )
         }
-        {...(filterStylingProps(rest, overStyled) as MuiStepLabelProps)}
       />
     );
   },