@recursica/mantine-adapter 0.42.1 → 0.44.0

package/src/components/Card/Card.tsx

@@ -7,6 +7,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Card.module.css";
@@ -32,11 +34,23 @@ export type CardProps = RecursicaOverStyled<
 /**
  * The root Card elevation box. It establishes the global background color, border radius, nested component gap, and outer shadow governed by the current `Layer` context.
  */
+// 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. `Card.module.css` unconditionally
+// drives these from Recursica UI Kit tokens on `.root`; the native prop is never consulted.
+const UNSUPPORTED_PROPS = [
+  "radius", // Border radius is token-driven (`--recursica_..._borders_border-radius`), not caller-set.
+  "withBorder", // Border is always applied via tokens on `.root`; not an optional caller toggle.
+  "padding", // Padding is token-driven (`--card-padding`), not Mantine's spacing-scale prop.
+] as const satisfies readonly (keyof MantineCardProps)[];
+
 const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
   { overStyled = false, ...rest },
   ref,
 ) {
-  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
 
   // Expose outer layout/flexbox properties on Card to allow structuring alongside siblings
   const safeCardLayoutKeys = [
@@ -56,25 +70,14 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
     }
   });
 
-  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 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,
+    },
+    (sanitizedProps as Record<string, unknown>).classNames as
+      | Partial<Record<string, string>>
+      | undefined,
+  );
 
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;
@@ -82,9 +85,9 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
   return (
     <MantineCard
       ref={ref}
+      {...(sanitizedProps as unknown as MantineCardProps)}
       className={classNameProp}
       classNames={mergedClassNames}
-      {...(sanitizedProps as unknown as MantineCardProps)}
     />
   );
 });
@@ -106,10 +109,10 @@ export const CardSection = forwardRef<HTMLDivElement, CardSectionProps>(
     return (
       <MantineCard.Section
         ref={ref}
+        {...(sanitizedProps as unknown as MantineCardSectionProps)}
         className={
           classNameProp ? `${styles.section} ${classNameProp}` : styles.section
         }
-        {...(sanitizedProps as unknown as MantineCardSectionProps)}
       />
     );
   },
@@ -122,19 +125,32 @@ export type CardHeaderProps = RecursicaOverStyled<RecursicaCardSectionProps>;
 /**
  * Replaces standard generic Mantine `<Card.Section>` wrappers by directly injecting the strict Recursica design tokens for header sizing, background drops, and intrinsic padding limits.
  */
+// 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. `CardHeaderProps` already omits all
+// native Mantine section props from the public type, but that alone doesn't stop a forced-typed
+// caller from smuggling one through `...rest`; `.header` in Card.module.css unconditionally
+// drives background/padding/border from Recursica tokens, so these native toggles are meaningless.
+const HEADER_FOOTER_UNSUPPORTED_PROPS = [
+  "withBorder", // The divider border is always applied via tokens on `.header`/`.footer`.
+  "inheritPadding", // Padding is fixed by the `.header`/`.footer` token-driven padding, not Mantine's default.
+] as const satisfies readonly (keyof MantineCardSectionProps)[];
+
 export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
   function CardHeader({ overStyled = false, ...rest }, ref) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      HEADER_FOOTER_UNSUPPORTED_PROPS,
+    );
     const classNameProp = (sanitizedProps as Record<string, unknown>)
       .className as string | undefined;
 
     return (
       <MantineCard.Section
         ref={ref}
+        {...(sanitizedProps as unknown as MantineCardSectionProps)}
         className={
           classNameProp ? `${styles.header} ${classNameProp}` : styles.header
         }
-        {...(sanitizedProps as unknown as MantineCardSectionProps)}
       />
     );
   },
@@ -149,17 +165,22 @@ export type CardFooterProps = RecursicaOverStyled<RecursicaCardSectionProps>;
  */
 export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
   function CardFooter({ overStyled = false, ...rest }, ref) {
-    const sanitizedProps = filterStylingProps(rest, overStyled);
+    // Reuses HEADER_FOOTER_UNSUPPORTED_PROPS (declared above with CardHeader) — same rationale
+    // applies: `.footer` in Card.module.css unconditionally drives padding/border from tokens.
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      HEADER_FOOTER_UNSUPPORTED_PROPS,
+    );
     const classNameProp = (sanitizedProps as Record<string, unknown>)
       .className as string | undefined;
 
     return (
       <MantineCard.Section
         ref={ref}
+        {...(sanitizedProps as unknown as MantineCardSectionProps)}
         className={
           classNameProp ? `${styles.footer} ${classNameProp}` : styles.footer
         }
-        {...(sanitizedProps as unknown as MantineCardSectionProps)}
       />
     );
   },
@@ -183,10 +204,10 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
     return (
       <div
         ref={ref}
+        {...sanitizedProps}
         className={
           classNameProp ? `${styles.content} ${classNameProp}` : styles.content
         }
-        {...sanitizedProps}
       />
     );
   },

package/src/components/Checkbox/Checkbox.tsx

@@ -7,6 +7,8 @@ import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import { CheckboxGroup } from "./CheckboxGroup";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import {
@@ -56,49 +58,34 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       ...rest
     } = props;
     // Checkbox doesn't use Label onLabelEditClick natively since it isn't mapped inside FormControlWrapper intrinsically.
-    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 Checkbox.module.css variables, not Mantine's native size scale.
+      "color", // Colors are token-driven via Checkbox.module.css; Mantine's native palette isn't exposed.
+      "radius", // Corner radius is fixed by Recursica tokens in Checkbox.module.css, not caller-configurable.
+      "variant", // Checkbox has a single Recursica-defined visual treatment; Mantine's variant isn't exposed.
+      "iconColor", // Icon color is token-driven via Checkbox.module.css, not a native Mantine override.
+    ] as const satisfies readonly (keyof MantineCheckboxProps)[];
+
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
     const restRecord = sanitizedProps as Record<string, unknown>;
 
-    // Actively delete dimension bindings that bypass the abstraction
-    delete restRecord["size"];
-    delete restRecord["color"];
-    delete restRecord["radius"];
-    delete restRecord["variant"];
-    delete restRecord["iconColor"];
-
-    const mergedClassNames: Partial<Record<string, string>> = {
-      root: styles.root,
-      body: styles.body,
-      inner: styles.inner,
-      input: styles.input,
-      icon: styles.icon,
-      labelWrapper: styles.labelWrapper,
-      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.body = o.body ? `${styles.body} ${o.body}` : styles.body;
-      mergedClassNames.inner = o.inner
-        ? `${styles.inner} ${o.inner}`
-        : styles.inner;
-      mergedClassNames.input = o.input
-        ? `${styles.input} ${o.input}`
-        : styles.input;
-      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;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        body: styles.body,
+        inner: styles.inner,
+        input: styles.input,
+        icon: styles.icon,
+        labelWrapper: styles.labelWrapper,
+        label: styles.label,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     const classNameProp = restRecord.className as string | undefined;
     const finalClass = classNameProp
@@ -136,10 +123,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const checkboxNode = (
       <MantineCheckbox
         ref={ref}
+        {...(sanitizedProps as unknown as MantineCheckboxProps)}
         className={finalClass}
         classNames={mergedClassNames}
         disabled={readOnly || disabled}
-        {...(sanitizedProps as unknown as MantineCheckboxProps)}
       />
     );
 

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -7,6 +7,7 @@ import {
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -62,11 +63,17 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
       defaultValue,
       ...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 Checkbox.module.css variables, not Mantine's native size scale.
+    ] as const satisfies readonly (keyof MantineCheckboxGroupProps)[];
 
-    // Delete prohibited sizing hooks from bypassing the variables
-    delete restRecord["size"];
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
+    const restRecord = sanitizedProps as Record<string, unknown>;
 
     // Mantine's own `Checkbox.Group` always establishes a context whose `value` defaults to
     // `[]` (see @mantine/core's `useUncontrolled({ finalValue: [] })`), and its `Checkbox` spreads
@@ -123,8 +130,8 @@ export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
           ) : (
             <div
               ref={ref}
-              role="group"
               {...(sanitizedProps as Record<string, unknown>)}
+              role="group"
               className={styles.groupRoot}
               data-layout={formLayout}
             >

package/src/components/Chip/Chip.tsx

@@ -5,6 +5,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  mergeClassNames,
+  withCallerOverride,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Chip.module.css";
@@ -45,6 +47,9 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
     removeIconRef,
     children,
     overStyled = false,
+    wrapperProps,
+    tabIndex,
+    "aria-hidden": ariaHidden,
     ...rest
   },
   ref,
@@ -52,26 +57,16 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
   const sanitizedProps = filterStylingProps(rest, overStyled);
   const restRecord = sanitizedProps as Record<string, unknown>;
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    label: styles.label,
-    input: styles.input,
-    iconWrapper: styles.mantineIconWrapper,
-    checkIcon: styles.checkIcon,
-  };
-
-  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.label = o.label
-      ? `${styles.label} ${o.label}`
-      : styles.label;
-  }
+  const mergedClassNames = mergeClassNames(
+    {
+      root: styles.root,
+      label: styles.label,
+      input: styles.input,
+      iconWrapper: styles.mantineIconWrapper,
+      checkIcon: styles.checkIcon,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   const classNameProp = restRecord.className as string | undefined;
   const finalClass = classNameProp
@@ -90,18 +85,30 @@ export const Chip = forwardRef<HTMLInputElement, ChipProps>(function Chip(
     restRecord.onClick !== undefined ||
     restRecord.onChange !== undefined;
 
+  // Our own computed default for Mantine's `wrapperProps` — flags the internal error/interactive
+  // CSS hooks. This is a real Mantine `ChipProps` slot a caller could legitimately pass their own
+  // value for, so it must merge via `withCallerOverride`, not silently clobber theirs.
+  const computedWrapperProps = {
+    ...(dataError !== undefined ? { "data-error": "" } : {}),
+    ...(isInteractive ? { "data-interactive": "" } : {}),
+  } as NonNullable<MantineChipProps["wrapperProps"]>;
+
   return (
     <MantineChip
       ref={ref}
+      {...sanitizedProps}
       className={finalClass}
       classNames={mergedClassNames}
-      wrapperProps={{
-        ...(dataError !== undefined ? { "data-error": "" } : {}),
-        ...(isInteractive ? { "data-interactive": "" } : {}),
-      }}
-      {...(isIconOnly ? { "data-icon-only": "" } : {})}
-      {...(!isInteractive ? { tabIndex: -1, "aria-hidden": true } : {})}
-      {...sanitizedProps}
+      wrapperProps={withCallerOverride(computedWrapperProps, wrapperProps)}
+      data-icon-only={isIconOnly ? "" : undefined}
+      tabIndex={withCallerOverride<number | undefined>(
+        isInteractive ? undefined : -1,
+        tabIndex,
+      )}
+      aria-hidden={withCallerOverride<boolean | "true" | "false" | undefined>(
+        isInteractive ? undefined : true,
+        ariaHidden,
+      )}
     >
       <span className={styles.innerWrapper}>
         {icon && (

package/src/components/DatePicker/DatePicker.tsx

@@ -3,6 +3,9 @@ import { DatePickerInput, type DatePickerInputProps } from "@mantine/dates";
 import { type ReadOnlyControlProps } from "@recursica/adapter-common";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  withCallerOverride,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
@@ -39,6 +42,15 @@ export interface RecursicaDatePickerProps
 
 export type DatePickerProps = RecursicaOverStyled<RecursicaDatePickerProps>;
 
+// 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.
+  "description", // Managed by FormControlWrapper via assistiveText.
+] as const satisfies readonly (keyof DatePickerInputProps)[];
+
 export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
   function DatePicker(props, ref) {
     const {
@@ -67,48 +79,34 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
       emptyValueComponent,
       value,
       defaultValue,
+      highlightToday = true, // Default on so today is visually marked; consumers can still override.
+      valueFormat = "MM/DD/YY", // Default display format; consumers can still override.
+      placeholder = "MM / DD / YY", // Default placeholder; consumers can still override.
+      leftSection, // Default leading icon computed below; consumers can still override.
       ...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"];
-    delete restRecord["description"]; // Managed by FormControlWrapper via assistiveText
-
     // 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,
-      day: styles.day,
-      weekday: styles.weekday,
-      calendarHeader: styles.calendarHeader,
-      calendarHeaderControl: styles.calendarHeaderControl,
-      calendarHeaderLevel: styles.calendarHeaderLevel,
-      calendarHeaderControlIcon: styles.calendarHeaderControlIcon,
-    };
-
-    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;
-    }
+    const mergedClassNames = mergeClassNames(
+      {
+        wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+        input: styles.input,
+        section: styles.section,
+        day: styles.day,
+        weekday: styles.weekday,
+        calendarHeader: styles.calendarHeader,
+        calendarHeaderControl: styles.calendarHeaderControl,
+        calendarHeaderLevel: styles.calendarHeaderLevel,
+        calendarHeaderControlIcon: styles.calendarHeaderControlIcon,
+      },
+      restRecord.classNames as Partial<Record<string, string>> | undefined,
+    );
 
     // The calendar popover surface (.dropdown) is styled by Mantine's underlying `Popover`
     // component, not `DatePickerInput` itself — it only accepts classNames via `popoverProps`,
@@ -129,12 +127,10 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
     delete restRecord["popoverProps"];
     const mergedPopoverProps = {
       ...consumerPopoverProps,
-      classNames: {
-        ...consumerPopoverClassNames,
-        dropdown: consumerPopoverClassNames?.dropdown
-          ? `${styles.dropdown} ${consumerPopoverClassNames.dropdown}`
-          : styles.dropdown,
-      },
+      classNames: mergeClassNames(
+        { dropdown: styles.dropdown },
+        consumerPopoverClassNames,
+      ),
     };
 
     const wrapperClass = className
@@ -177,6 +173,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
           /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
           <DatePickerInput
             ref={ref}
+            {...(sanitizedProps as unknown as DatePickerInputProps)}
             classNames={mergedClassNames}
             disabled={disabled}
             value={value}
@@ -185,16 +182,18 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
             description={undefined} // Disable Mantine's native description
             error={undefined} // Disable Mantine's native error text (handled by wrapper)
             withAsterisk={false} // Handled by wrapper
+            highlightToday={highlightToday}
+            valueFormat={valueFormat}
+            placeholder={placeholder}
+            leftSection={withCallerOverride<React.ReactNode>(
+              <CalendarIcon />,
+              leftSection,
+            )}
             wrapperProps={{
               "data-disabled": disabled ? "true" : undefined,
               "data-error": error ? "true" : undefined,
             }}
-            highlightToday // Default on so today is visually marked; consumers can still override via rest
-            valueFormat="MM/DD/YY" // Default display format; consumers can still override via rest
-            placeholder="MM / DD / YY" // Default placeholder; consumers can still override via rest
-            leftSection={<CalendarIcon />} // Default leading icon; consumers can still override via rest
             popoverProps={mergedPopoverProps}
-            {...(sanitizedProps as unknown as DatePickerInputProps)}
           />
         }
       />

package/src/components/Dropdown/BareDropdown.tsx

@@ -5,6 +5,8 @@ import {
 } from "@mantine/core";
 import {
   filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
   type RecursicaOverStyled,
 } from "../../utils/filterStylingProps";
 import styles from "./Dropdown.module.css";
@@ -37,29 +39,40 @@ export interface BareDropdownProps
 
 export type BareDropdownComponentProps = RecursicaOverStyled<BareDropdownProps>;
 
+// 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 BareDropdown = forwardRef<
   HTMLInputElement,
   BareDropdownComponentProps
 >(function BareDropdown(props, ref) {
   const { overStyled = false, className, disabled, error, ...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 restRecord["size"];
-  delete restRecord["variant"];
-  delete restRecord["radius"];
-
-  const mergedClassNames: Partial<Record<string, string>> = {
-    wrapper: className ? `${styles.root} ${className}` : styles.root,
-    input: styles.input,
-    section: styles.section,
-    dropdown: styles.dropdown,
-    option: styles.option,
-  };
+  const mergedClassNames = mergeClassNames(
+    {
+      wrapper: className ? `${styles.root} ${className}` : styles.root,
+      input: styles.input,
+      section: styles.section,
+      dropdown: styles.dropdown,
+      option: styles.option,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
 
   return (
     <MantineSelect
       ref={ref}
+      {...(sanitizedProps as unknown as MantineSelectProps)}
       classNames={mergedClassNames}
       disabled={disabled}
       label={undefined}
@@ -77,7 +90,6 @@ export const BareDropdown = forwardRef<
           "data-error": error ? "true" : undefined,
         },
       }}
-      {...(sanitizedProps as unknown as MantineSelectProps)}
     />
   );
 });

package/src/components/Dropdown/DROPDOWN_IMPLEMENTATION_NOTES.md

@@ -5,3 +5,5 @@ The `Dropdown` component is mapped explicitly to Mantine's `<Select>` following
 1. **Naked Primitive Mapping:** Mantine's `Select` natively executes macro-label generation. To decouple it, we explicitly disable internal labels (`label={undefined}`) and inject it purely inside our generic `FormControlWrapper`.
 2. **Strict Dropdown Design Tokens:** The adapter implements strictly sandboxed styling utilizing only `--recursica_ui-kit_components_dropdown_...` variables. It explicitly does NOT inherit general `text-field` tokens despite geometric similarities, ensuring dropdown menus can be themed independently.
 3. **Dropdown Appendages:** To correctly map Mantine's detached Popover `.dropdown` and list `.option` items, we targeted focus and geometric bindings appending standard padding structures matched to the dropdown height overrides dynamically into our `Dropdown.module.css`.
+4. **Popup Vertical Padding:** The gap above/below the option list inside `.dropdown` is explicitly set from the same `--recursica_..._dropdown_properties_vertical-padding` token the closed control uses — it was previously left to Mantine's own untokenized `--combobox-padding` (4px) default.
+5. **Clear Button Styling:** Mantine's native clear button (`clearButtonProps`, shown when `clearable` + a value are both present) is a bare `CloseButton` with its own hardcoded gray icon/hover styling by default. `Dropdown.tsx` merges in a `.clearButton` class (Dropdown.module.css) that overrides it with the same icon-size/trailing-icon-color/focus-ring tokens as the rest of the right section, using the double-class-selector specificity trick (same as Chip.module.css's `.root.root`) to beat Mantine's own CSS module rule without `!important`.