@recursica/mantine-adapter 0.42.1 → 0.44.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.42.1",
+  "version": "0.44.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/components/Accordion/Accordion.tsx

@@ -8,6 +8,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Accordion.module.css";
@@ -47,44 +49,31 @@ const AccordionBase = function Accordion({
       : variant;
 
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   // Bind all deep CSS module references natively into the global class mapping schema
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    item: styles.item,
-    control: styles.control,
-    label: styles.label,
-    chevron: styles.chevron,
-    icon: styles.icon,
-    panel: styles.panel,
-    content: styles.content,
-  };
-
-  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(
+    {
+      root: styles.root,
+      item: styles.item,
+      control: styles.control,
+      label: styles.label,
+      chevron: styles.chevron,
+      icon: styles.icon,
+      panel: styles.panel,
+      content: styles.content,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
-  const classNameProp = (sanitizedProps as Record<string, unknown>)
-    .className as string | undefined;
+  const classNameProp = restRecord.className as string | undefined;
 
   return (
     <MantineAccordion
+      {...(sanitizedProps as unknown as MantineAccordionProps)}
       variant={resolvedVariant as MantineAccordionProps["variant"]}
       className={classNameProp}
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantineAccordionProps)}
     />
   );
 };
@@ -128,9 +117,9 @@ export const AccordionItem = forwardRef<
   return (
     <MantineAccordion.Item
       ref={ref}
+      {...(sanitizedProps as unknown as AccordionItemProps)}
       className={finalClass}
       data-disabled={disabled || undefined}
-      {...(sanitizedProps as unknown as AccordionItemProps)}
     >
       {title ? (
         <>
@@ -155,6 +144,13 @@ export type AccordionControlWrapperProps = RecursicaOverStyled<
   Omit<AccordionControlProps, "icon"> & RecursicaAccordionControlProps
 >;
 
+// 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 = [
+  "icon", // Mantine's native icon slot is fully computed here from `leftIcon`; the `Omit<>` on
+  // AccordionControlWrapperProps only stops a well-typed caller, this is the runtime backstop.
+] as const satisfies readonly (keyof AccordionControlProps)[];
+
 export const AccordionControl = forwardRef<
   HTMLButtonElement,
   AccordionControlWrapperProps
@@ -162,13 +158,17 @@ export const AccordionControl = forwardRef<
   { leftIcon, children, overStyled = false, ...rest },
   ref,
 ) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;
 
   return (
     <MantineAccordion.Control
       ref={ref}
+      {...(sanitizedProps as unknown as AccordionControlProps)}
       className={classNameProp}
       icon={
         leftIcon ? (
@@ -177,7 +177,6 @@ export const AccordionControl = forwardRef<
           </span>
         ) : undefined
       }
-      {...(sanitizedProps as unknown as AccordionControlProps)}
     >
       {children}
     </MantineAccordion.Control>
@@ -201,8 +200,8 @@ export const AccordionPanel = forwardRef<
   return (
     <MantineAccordion.Panel
       ref={ref}
-      className={classNameProp}
       {...(sanitizedProps as unknown as AccordionPanelProps)}
+      className={classNameProp}
     />
   );
 });

package/src/components/AssistiveElement/AssistiveElement.tsx

@@ -74,11 +74,11 @@ export const AssistiveElement = forwardRef<
   return (
     <div
       ref={ref}
+      {...restRecord} // Spread standard HTML attributes (like id, aria-*) natively.
       className={finalClass}
       data-variant={assistiveVariant}
       role={resolvedRole}
       style={restRecord.style as React.CSSProperties}
-      {...restRecord} // Spread standard HTML attributes (like id, aria-*) natively.
     >
       {assistiveWithIcon && (
         <span className={styles.iconWrapper}>

package/src/components/AutoComplete/AutoComplete.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";
@@ -42,6 +44,14 @@ export interface RecursicaAutoCompleteProps
 
 export type AutoCompleteProps = RecursicaOverStyled<RecursicaAutoCompleteProps>;
 
+// 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 the `size` variant + design tokens, not raw dimensions.
+  "variant", // Colors/variants are token-driven; the library's native palette isn't exposed.
+  "radius", // Recursica does not expose the library's native corner-radius system.
+] as const satisfies readonly (keyof MantineAutocompleteProps)[];
+
 export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
   function AutoComplete(props, ref) {
     const {
@@ -72,46 +82,24 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
       defaultValue,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
-    const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      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,
-      dropdown: styles.dropdown,
-      option: styles.option,
-    };
-
-    const classNamesProp = restRecord.classNames;
-    if (
-      classNamesProp &&
-      typeof classNamesProp === "object" &&
-      !Array.isArray(classNamesProp)
-    ) {
-      const o = classNamesProp as Partial<Record<string, string>>;
-      mergedClassNames.wrapper = o.wrapper
-        ? `${styles.root} ${o.wrapper}`
-        : styles.root;
-      mergedClassNames.input = o.input
-        ? `${styles.input} ${o.input}`
-        : styles.input;
-      mergedClassNames.section = o.section
-        ? `${styles.section} ${o.section}`
-        : styles.section;
-      mergedClassNames.dropdown = o.dropdown
-        ? `${styles.dropdown} ${o.dropdown}`
-        : styles.dropdown;
-      mergedClassNames.option = o.option
-        ? `${styles.option} ${o.option}`
-        : styles.option;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+        input: styles.input,
+        section: styles.section,
+        dropdown: styles.dropdown,
+        option: styles.option,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     const wrapperClass = className
       ? `${styles.layoutOverride} ${className}`
@@ -147,12 +135,12 @@ export const AutoComplete = forwardRef<HTMLInputElement, AutoCompleteProps>(
           /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
           <MantineAutocomplete
             ref={ref}
+            {...(sanitizedProps as unknown as MantineAutocompleteProps)}
             classNames={mergedClassNames}
             disabled={disabled}
             value={value as string | undefined}
             defaultValue={defaultValue as string | undefined}
             error={!!error}
-            {...(sanitizedProps as unknown as MantineAutocompleteProps)}
           />
         }
       />

package/src/components/Avatar/Avatar.tsx

@@ -6,6 +6,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Avatar.module.css";
@@ -41,7 +43,17 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     large: "lg",
   } as const;
 
-  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 = [
+    "color", // Colors are token-driven via `data-variant`; Mantine's native palette isn't exposed.
+    "radius", // Avatar corner radius is controlled by design tokens, not a raw radius prop.
+  ] as const satisfies readonly (keyof MantineAvatarProps)[];
+
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
   const restRecord = sanitizedProps as Record<string, unknown>;
 
   // Determine semantic style based on provided props
@@ -52,33 +64,21 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     computedStyle = "icon";
   }
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    image: styles.image,
-    placeholder: styles.placeholder,
-  };
-
-  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.image = o.image
-      ? `${styles.image} ${o.image}`
-      : styles.image;
-    mergedClassNames.placeholder = o.placeholder
-      ? `${styles.placeholder} ${o.placeholder}`
-      : styles.placeholder;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      image: styles.image,
+      placeholder: styles.placeholder,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
 
   return (
     <MantineAvatar
       ref={ref}
+      {...sanitizedProps}
       className={classNameProp}
       classNames={mergedClassNames}
       variant={mapVariant[variant]}
@@ -87,7 +87,6 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
       data-variant={variant}
       data-size={size}
       data-style={computedStyle}
-      {...sanitizedProps}
     >
       {icon != null ? (
         <span className={styles.iconWrapper} aria-hidden>

package/src/components/Badge/Badge.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Badge.module.css";
@@ -25,23 +26,16 @@ const _Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   // External layout props like margins are safely preserved.
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    section: styles.section,
-    label: styles.label,
-  };
-
-  const classNamesProp = (sanitizedProps as Record<string, unknown>).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.section = o.section ?? styles.section;
-    mergedClassNames.label = o.label ?? styles.label;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      section: styles.section,
+      label: styles.label,
+    },
+    (sanitizedProps as Record<string, unknown>).classNames as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;
@@ -52,9 +46,9 @@ const _Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   return (
     <MantineBadge
       ref={ref}
+      {...sanitizedProps}
       variant="filled" // We manage visual style purely through our CSS variables mapping
       data-variant={variant}
-      {...sanitizedProps}
       className={finalClass}
       classNames={mergedClassNames}
     />

package/src/components/Breadcrumb/Breadcrumb.module.css

@@ -23,4 +23,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Neutralize Mantine's built-in margin-inline (--mantine-spacing-xs default) so .root's gap alone controls spacing */
+  margin-inline: 0;
 }

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -56,12 +56,6 @@ export const Default: Story = {
   },
 };
 
-export const StaticExample: Story = {
-  args: {
-    items: ["Store", "Electronics", "Computers", "Laptops"],
-  },
-};
-
 export const CustomSeparator: Story = {
   args: {
     items: ["Root", "Branch", "Leaf"],

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Breadcrumb.module.css";
@@ -24,24 +25,30 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
       overStyled,
     );
 
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      separator: styles.separator,
-    };
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        separator: styles.separator,
+      },
+      (sanitizedProps as Record<string, unknown>).classNames as
+        | Partial<Record<string, string>>
+        | undefined,
+    );
 
-    const classNamesProp = (sanitizedProps as Record<string, unknown>)
-      .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.separator = o.separator
-        ? `${styles.separator} ${o.separator}`
-        : styles.separator;
-    }
+    // Mantine's Breadcrumbs, unlike MUI's, doesn't hide the separator from screen
+    // readers by default — it's a plain text node. Match MUI's built-in aria-hidden,
+    // letting a caller override it via attributes.separator["aria-hidden"] if needed.
+    const callerAttributes = (sanitizedProps as Record<string, unknown>)
+      .attributes as
+      | Partial<Record<string, Record<string, unknown>>>
+      | undefined;
+    const mergedAttributes = {
+      ...callerAttributes,
+      separator: {
+        "aria-hidden": true,
+        ...callerAttributes?.separator,
+      },
+    };
 
     const classNameProp = (sanitizedProps as Record<string, unknown>)
       .className as string | undefined;
@@ -55,6 +62,7 @@ export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
         {...(sanitizedProps as unknown as MantineBreadcrumbsProps)}
         className={finalClass}
         classNames={mergedClassNames}
+        attributes={mergedAttributes}
       />
     );
   },

package/src/components/Button/Button.tsx

@@ -7,6 +7,9 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  withCallerOverride,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Button.module.css";
@@ -49,11 +52,17 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     small: "sm",
   } as const;
 
-  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 = [
+    "fullWidth", // Recursica Button width comes from layout/token constraints, not Mantine's boolean fullWidth toggle.
+  ] as const satisfies readonly (keyof MantineButtonProps)[];
 
-  // Explicitly delete blocked semantic expansion dimension props
-  delete restRecord["fullWidth"];
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled) as Record<string, unknown>,
+    UNSUPPORTED_PROPS,
+  ) as Partial<typeof rest>;
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   const hasLeftSection = !!icon || !!restRecord["leftSection"];
   const hasRightSection = !!restRecord["rightSection"];
@@ -78,41 +87,33 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     );
   }
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    section: styles.section,
-    label: styles.label,
-    loader: styles.loader,
-  };
-
-  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.section = o.section ?? styles.section;
-    mergedClassNames.label = o.label ?? styles.label;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      section: styles.section,
+      label: styles.label,
+      loader: styles.loader,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
     ? `${styles.root} ${classNameProp}`
     : styles.root;
-  // className is merged explicitly above — don't let the {...sanitizedProps} spread below
-  // silently overwrite finalClass with just the caller's own class (same bug class as
-  // mantine-adapter's Dropdown/BareDropdown.tsx had). Masked here today since `classNames.root`
-  // (a separate prop, unaffected) also carries styles.root — but a real latent bug regardless.
-  delete restRecord["className"];
+  // Note: `finalClass` is safe from being clobbered by `{...sanitizedProps}` below purely
+  // because of spread order — `className` (like `classNames`, `variant`, `size`, `leftSection`,
+  // and the `data-*` attributes) is spread first, then re-asserted after, so our computed value
+  // always wins. See the canonical guide's §3.3 for why ordering (not deletion) is the fix here.
 
   const userLoaderProps = restRecord.loaderProps as
     | Record<string, unknown>
     | undefined;
 
-  const resolvedLoaderSize =
-    loaderSize ?? (size === "small" ? "small" : "default");
+  const resolvedLoaderSize = withCallerOverride(
+    size === "small" ? "small" : "default",
+    loaderSize,
+  );
 
   let mergedLoaderProps = userLoaderProps;
   if (useRecursicaLoader) {
@@ -125,6 +126,7 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   return (
     <MantineButton
       ref={ref}
+      {...sanitizedProps}
       className={finalClass}
       classNames={mergedClassNames}
       variant={mapVariant[variant]}
@@ -140,7 +142,6 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       data-variant={variant}
       data-size={size}
       data-content={contentType}
-      {...sanitizedProps}
       disabled={!!restRecord.disabled || !!restRecord.loading}
     >
       <span className={styles.labelText}>{children}</span>