@recursica/mui-adapter 0.26.0 → 0.28.0

package/src/components/Menu/Menu.stories.tsx

@@ -12,6 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Menu, MenuItem, MenuDivider } from "./Menu";
 import { Button } from "../Button";
 import { ListSubheader } from "@mui/material";
+import styles from "./Menu.module.css";
 
 const SettingsIcon = (props: React.ComponentProps<"svg">) => (
   <svg
@@ -123,6 +124,56 @@ const ArrowsIcon = (props: React.ComponentProps<"svg">) => (
   </svg>
 );
 
+const ChevronRightIcon = (props: React.ComponentProps<"svg">) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
+
+// mui-adapter's Menu is monolithic (see IMPLEMENTATION_NOTES.md) — there is no
+// Menu.Sub composable, so a submenu is just a MenuItem that anchors its own
+// nested Menu, mirroring how the top-level trigger manages its own anchorEl.
+interface SubMenuTriggerProps {
+  label: string;
+  children: React.ReactNode;
+}
+
+const SubMenuTrigger = ({ label, children }: SubMenuTriggerProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  return (
+    <>
+      <MenuItem onClick={(event) => setAnchorEl(event.currentTarget)}>
+        {label}
+        <ChevronRightIcon
+          className={styles.chevron}
+          style={{ marginLeft: "auto", paddingLeft: 8 }}
+        />
+      </MenuItem>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+      >
+        {children}
+      </Menu>
+    </>
+  );
+};
+
 type MenuStoryArgs = Record<string, unknown>;
 
 const meta: Meta = {
@@ -225,9 +276,84 @@ export const WithDisabledItems: Story = {
   },
 };
 
-export const HoverTrigger: Story = {
+export const WithSubmenus: Story = {
   render: (args) => (
     <InteractiveMenu {...args}>
+      <MenuItem>Dashboard</MenuItem>
+      <SubMenuTrigger label="Products">
+        <MenuItem>All products</MenuItem>
+        <MenuItem>Categories</MenuItem>
+        <MenuItem>Tags</MenuItem>
+      </SubMenuTrigger>
+      <SubMenuTrigger label="Orders">
+        <MenuItem>Open</MenuItem>
+        <MenuItem>Completed</MenuItem>
+        <MenuItem>Cancelled</MenuItem>
+      </SubMenuTrigger>
+    </InteractiveMenu>
+  ),
+  args: {
+    opened: true,
+    // Match mantine's explicit `width: 200` for this story so the row has room for the
+    // "Products"/"Orders" label plus the submenu chevron without clipping it.
+    slotProps: { paper: { style: { minWidth: 200 } } },
+  },
+};
+
+// mui-adapter's Menu has no native hover-trigger support (unlike Mantine's `trigger` prop),
+// so this story implements open-on-hover itself: hovering the target opens the menu, and a
+// short close delay (mirroring Mantine's `closeDelay`) keeps it open while the pointer moves
+// from the target into the dropdown, since MUI's Menu renders in a portal outside the
+// wrapper's DOM subtree.
+const HoverMenu = ({ children, ...args }: InteractiveMenuProps) => {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+
+  const cancelClose = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  };
+  const scheduleClose = () => {
+    closeTimer.current = setTimeout(() => setOpen(false), 300);
+  };
+
+  return (
+    <div>
+      <Button
+        ref={buttonRef}
+        variant="solid"
+        onClick={() => setOpen((prev) => !prev)}
+        onMouseEnter={() => {
+          cancelClose();
+          setOpen(true);
+        }}
+        onMouseLeave={scheduleClose}
+      >
+        Hover or Click
+      </Button>
+      <Menu
+        {...args}
+        anchorEl={buttonRef.current}
+        open={open}
+        onClose={() => setOpen(false)}
+        slotProps={{
+          paper: {
+            onMouseEnter: cancelClose,
+            onMouseLeave: scheduleClose,
+          },
+        }}
+      >
+        {children}
+      </Menu>
+    </div>
+  );
+};
+
+export const HoverTrigger: Story = {
+  render: (args) => (
+    <HoverMenu {...args}>
       <MenuItem>
         <SettingsIcon style={{ marginRight: 8 }} /> Settings
       </MenuItem>
@@ -237,9 +363,6 @@ export const HoverTrigger: Story = {
       <MenuItem>
         <ImageIcon style={{ marginRight: 8 }} /> Gallery
       </MenuItem>
-    </InteractiveMenu>
+    </HoverMenu>
   ),
-  args: {
-    opened: true,
-  },
 };

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,
-      }}
+      className={className}
+      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.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.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.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.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.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);