@recursica/mantine-adapter 0.42.0 → 0.43.0

package/src/components/Dropdown/Dropdown.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";
@@ -28,6 +30,14 @@ export interface RecursicaDropdownProps
 
 export type DropdownProps = RecursicaOverStyled<RecursicaDropdownProps>;
 
+// 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 MantineSelectProps)[];
+
 export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
   function Dropdown(props, ref) {
     const {
@@ -60,46 +70,23 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       data,
       ...rest
     } = props;
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    );
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Delete prohibited sizing hooks from bypassing variables natively
-    delete restRecord["size"];
-    delete restRecord["variant"];
-    delete restRecord["radius"];
-
     // 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 injectedStyles = {
       ...((style as React.CSSProperties) || {}),
@@ -146,6 +133,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           /* Naked Select execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
           <MantineSelect
             ref={ref}
+            {...(sanitizedProps as unknown as MantineSelectProps)}
             classNames={mergedClassNames}
             disabled={disabled}
             value={value}
@@ -169,7 +157,6 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
                 "data-error": error ? "true" : undefined,
               },
             }}
-            {...(sanitizedProps as unknown as MantineSelectProps)}
           />
         }
       />

package/src/components/FileInput/FileInput.module.css

@@ -1,24 +1,3 @@
-/* EXEMPTIONS:
-   - The disabled/error states' own border-size variables are ignored so the border never changes
-     thickness across states and shifts the layout — same house policy as TextField/DatePicker.
-     The flat, state-agnostic properties_border-size token below is applied uniformly instead.
-   - There is no forge-defined focus state for file-input (no `states.focus` axis, unlike its
-     disabled/error siblings) — the generic recursica_brand_states_focus_* ring is used instead,
-     same fallback TextField/DatePicker use for the same reason.
-   - properties_icon-text-gap doubles as the gap between chips: file-input has no dedicated
-     chip-gap token (unlike file-upload's properties_item-gap).
-   - The trailing clear-all affordance is now a real shared `Button` (icon-only, "text" variant)
-     rather than a bespoke span, so it gets its own real button semantics/keyboard handling —
-     same pattern as Tree's expand/collapse button. It renders through Button's own tokened
-     color states (including disabled), so file-input's own trailing-icon color tokens — which
-     have no "clear button is disabled/errored" equivalent state of their own anyway — are no
-     longer consumed here. */
-/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_colors_trailing-icon */
-/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_trailing-icon */
-/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_trailing-icon */
-
 /* LAYOUT SPACING OVERRIDES:
    - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens.
    - Also sets the --file-input-control-{max,min}-width hooks consumed inline in FileInput.tsx,

package/src/components/FileInput/FileInput.tsx

@@ -309,6 +309,7 @@ export const FileInput = forwardRef<HTMLDivElement, FileInputProps>(
       >
         <div
           ref={ref}
+          {...restRecord}
           className={styles.root}
           role="button"
           aria-label={browseLabel}
@@ -324,7 +325,6 @@ export const FileInput = forwardRef<HTMLDivElement, FileInputProps>(
           onDragLeave={interactive ? handleDragLeave : undefined}
           onDragOver={interactive ? handleDragOver : undefined}
           onDrop={interactive ? handleDrop : undefined}
-          {...restRecord}
         >
           <span className={styles.leadingIcon} aria-hidden>
             {icon ?? <UploadIcon />}

package/src/components/FileUpload/FileUpload.module.css

@@ -1,14 +1,3 @@
-/* EXEMPTIONS:
-   - border-style has no usable var(...) form: the Figma-exported token's value is the literal
-     string `"dashed"` (quotes included), which is not a valid CSS <line-style> keyword — the same
-     class of "structural, not tokenized" property the canonical guide already treats border-style
-     as (see .root's own HARDCODED VALUES note below and TimePicker/DatePicker's identical
-     hardcoded `border-style: solid`). Hardcoded to the keyword `dashed` instead.
-   - properties_icon-size has no equivalent: unlike TextField/DatePicker, file-upload has no
-     dedicated icon-size token. Sized to visually match the Figma reference instead (see
-     HARDCODED VALUES below). */
-/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-style */
-
 /* HARDCODED VALUES:
    - .root: display: flex; flex-direction: column; width: 100% — structural layout, not a design
      token concern (matches how other block-level components like Layer are laid out).

package/src/components/FileUpload/FileUpload.tsx

@@ -268,10 +268,10 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
       >
         <div
           ref={ref}
+          {...restRecord}
           className={styles.root}
           data-disabled={disabled ? "true" : undefined}
           data-error={effectiveError ? "true" : undefined}
-          {...restRecord}
         >
           {!readOnly && (
             <div

package/src/components/HoverCard/HoverCard.module.css

@@ -5,13 +5,7 @@
      and positioning (-arrowSize/2) calculations that cannot be CSS-driven. The default matches
      the Recursica beak-size token (16px). See COMPONENT_ISSUES.md for details.
    - All structural layout (display, position, overflow) is deferred to Mantine's native
-     behavior. We only override visual design tokens (colors, typography, spacing, borders).
-/* EXEMPTIONS:
-   - beak-size is ignored here because Mantine's popover arrows compute their sizing and positional offsets
-     dynamically within the React rendering engine (requires inline pixel number rather than standard CSS variables).
-     The beak size is checked in JS against a fixed value of 16px. If this variable changes, the TSX components
-     need to be reviewed/re-compiled. */
-/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_beak-size = 16px */
+     behavior. We only override visual design tokens (colors, typography, spacing, borders). */
 
 /* ======================================
    DROPDOWN CONTAINER

package/src/components/HoverCard/HoverCard.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./HoverCard.module.css";
@@ -42,54 +43,37 @@ export type HoverCardProps = RecursicaOverStyled<
 const HoverCardBase = function HoverCard({
   overStyled = false,
   withBeak = true,
+  position = "top", // Recursica default; Mantine defaults to "bottom". Consumers can still override.
+  // arrowSize must be a JS number prop — Mantine uses it for inline width/height
+  // and positioning offset (-arrowSize/2) calculations that cannot be CSS-driven.
+  // Default to 16 to match the Recursica beak-size token (16px). Consumers can still override.
+  arrowSize = 16,
+  withArrow,
   ...rest
 }: HoverCardProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
   // Bind CSS module classes to Mantine's internal classNames API
-  const mergedClassNames: Partial<Record<string, string>> = {
-    dropdown: styles.dropdown,
-    arrow: styles.arrow,
-  };
-
-  const classNamesProp = (sanitizedProps as Record<string, unknown>).classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Record<string, string>;
-    Object.keys(o).forEach((key) => {
-      if (mergedClassNames[key]) {
-        mergedClassNames[key] = `${mergedClassNames[key]} ${o[key]}`;
-      } else {
-        mergedClassNames[key] = o[key];
-      }
-    });
-  }
-
-  // arrowSize must be a JS number prop — Mantine uses it for inline width/height
-  // and positioning offset (-arrowSize/2) calculations that cannot be CSS-driven.
-  // Default to 16 to match the Recursica beak-size token (16px).
-  const arrowSize =
-    ((sanitizedProps as Record<string, unknown>).arrowSize as
-      | number
-      | undefined) ?? 16;
+  const mergedClassNames = mergeClassNames(
+    {
+      dropdown: styles.dropdown,
+      arrow: styles.arrow,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   // Resolve withBeak (Recursica) vs withArrow (Mantine).
   // withBeak takes precedence when both are provided.
-  const withArrow = (sanitizedProps as Record<string, unknown>).withArrow as
-    | boolean
-    | undefined;
   const resolvedWithArrow = withBeak ?? withArrow;
 
   return (
     <MantineHoverCard
-      position="top" /* Recursica default; Mantine defaults to "bottom" */
+      {...(sanitizedProps as unknown as MantineHoverCardProps)}
+      position={position}
       arrowSize={arrowSize}
       withArrow={resolvedWithArrow}
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantineHoverCardProps)}
     />
   );
 };
@@ -128,8 +112,8 @@ const HoverCardDropdown = function HoverCardDropdown({
 
   return (
     <MantineHoverCard.Dropdown
-      className={classNameProp}
       {...(sanitizedProps as unknown as MantineHoverCardDropdownProps)}
+      className={classNameProp}
     />
   );
 };

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

@@ -1,14 +1,8 @@
-/* EXEMPTIONS:
-   - layouts_stacked sizes width variables are ignored because stacked labels naturally occupy 100% width block-level 
-     real estate in HTML rendering, making explicit width properties redundant. */
-
 /* HARDCODED VALUES:
    - display: flex helps us leverage flex 'order' to perfectly position Mantine's injected asterisk.
    - align-items: baseline ensures text logic lines up nicely if font sizes differ slightly.
    - margin/padding resets.
  */
-/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_default_properties_width */
-/* recursica-ignore: --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_small_properties_width */
 
 .root {
   display: flex;

package/src/components/Label/Label.tsx

@@ -2,6 +2,8 @@ import React, { forwardRef } from "react";
 import { Input, type InputLabelProps } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Label.module.css";
@@ -35,28 +37,25 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
     else if (labelOptionalText) resolvedOptionalText = labelOptionalText;
   }
 
-  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 label sizing via `labelSize` + design tokens, not Mantine's native `size`.
+  ] as const satisfies readonly (keyof InputLabelProps)[];
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    label: styles.root,
-    required: styles.required,
-  };
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
-  const classNamesProp = restRecord.classNames;
-  if (
-    classNamesProp &&
-    typeof classNamesProp === "object" &&
-    !Array.isArray(classNamesProp)
-  ) {
-    const o = classNamesProp as Partial<Record<string, string>>;
-    mergedClassNames.label = o.label
-      ? `${styles.root} ${o.label}`
-      : styles.root;
-    mergedClassNames.required = o.required
-      ? `${styles.required} ${o.required}`
-      : styles.required;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      label: styles.root,
+      required: styles.required,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -66,12 +65,12 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   return (
     <Input.Label
       ref={ref}
+      {...sanitizedProps}
       className={finalClass}
       classNames={mergedClassNames}
       data-size={labelSize}
       data-alignment={resolvedAlignment}
       required={required && !labelWithEditIcon}
-      {...sanitizedProps}
     >
       <span className={styles.labelText}>{children}</span>
       {resolvedOptionalText && (

package/src/components/Link/Link.module.css

@@ -1,9 +1,4 @@
-/* EXEMPTIONS:
-   - text_text-transform is ignored because links naturally inherit casing directly from text
-     children rather than requiring custom CSS transforms. */
-/* recursica-ignore: --recursica_ui-kit_components_link_properties_text_text-transform */
-
-/* 
+/*
 HARDCODED VALUES:
 - display: inline-flex; (Base layout to align icon and text correctly)
 - align-items: center;

package/src/components/Link/Link.tsx

@@ -6,6 +6,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Link.module.css";
@@ -23,19 +24,10 @@ const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   const sanitizedProps = filterStylingProps(rest, overStyled);
   const restRecord = sanitizedProps as Record<string, unknown>;
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-  };
-
-  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;
-  }
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -45,11 +37,11 @@ const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   return (
     <MantineAnchor
       ref={ref}
+      {...(sanitizedProps as Record<string, unknown>)}
       className={finalClass}
       classNames={mergedClassNames}
       underline="never"
       {...(icon ? { "data-has-icon": "" } : {})}
-      {...(sanitizedProps as Record<string, unknown>)}
     >
       {icon && (
         <span className={styles.iconWrapper} aria-hidden>

package/src/components/Loader/Loader.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Loader.module.css";
@@ -33,23 +34,14 @@ export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
   // Strip all visual override injections unless developer has specifically opted into overStyling.
   // External layout props like margins are safely preserved.
   const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-  };
-
-  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;
-  }
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    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;
   const finalClass = classNameProp
     ? `${styles.root} ${classNameProp}`
     : styles.root;
@@ -57,10 +49,10 @@ export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
   return (
     <MantineLoader
       ref={ref}
+      {...sanitizedProps}
       type={variant}
       data-variant={variant}
       data-size={resolvedSize}
-      {...sanitizedProps}
       className={finalClass}
       classNames={mergedClassNames}
     />

package/src/components/Menu/Menu.module.css

@@ -1,9 +1,3 @@
-/* EXEMPTIONS:
-   - colors_supporting-text-color (selected variant) is ignored because selected menu items do not
-     render supporting secondary text, making the selected-state override for supporting text
-     colors obsolete. */
-/* recursica-ignore: --recursica_ui-kit_components_menu-item_variants_selection-states_selected_properties_colors_supporting-text-color */
-
 /* HARDCODED VALUES:
    - border-style: solid. Structural rendering rule for the dropdown border (Mantine uses Paper which may not set border natively).
    - NOTE: overflow is intentionally NOT set on .dropdown. Mantine renders sub-menu dropdowns