@recursica/mui-adapter 0.21.1 → 0.22.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.21.1",
+  "version": "0.22.0",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Accordion/ACCORDION_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,63 @@
+# Accordion – implementation notes
+
+Decisions and design tweaks specific to the UI Kit's Accordion wrapped against `@mui/material`.
+
+---
+
+## 1. Context-based container (no native MUI equivalent)
+
+**Decision:** MUI has no group-level `Accordion` — its own `Accordion` component _is_ the
+item, controlled individually via `expanded`/`onChange`. Recursica's container/group model
+(single `value`, `multiple`, cascading `chevron`) is reimplemented with a React context
+(`AccordionContext`) that each `AccordionItem`/`AccordionControl` reads from.
+**Implementation:** `AccordionBase` owns the controlled/uncontrolled `value` state and hands
+`{ value, onChange, chevron }` down via context; `AccordionItem` derives its own `expanded`
+from that context instead of taking it as a prop.
+
+---
+
+## 2. Prop-contract Omits protect the context wiring
+
+**Decision:** Because `AccordionItem`/`AccordionControl` are thin wrappers around real MUI
+components (`MuiAccordion`/`MuiAccordionSummary`), their native `expanded`/`onChange`/
+`expandIcon` props would otherwise collide with the values these wrappers compute from
+context.
+**Implementation:** `AccordionItemWrapperProps` omits `expanded`/`onChange`/`defaultExpanded`
+from `MuiAccordionProps`; `AccordionControlWrapperProps` omits `expandIcon` from
+`MuiAccordionSummaryProps`. Neither is exposed on `RecursicaAccordionItemProps`/
+`RecursicaAccordionControlProps`, so passing them is a compile error, not a silent override.
+
+---
+
+## 3. `disabled` is a formally supported, shared prop
+
+**Decision:** `RecursicaAccordionItemProps.disabled` is shared as-is with MUI's native
+`Accordion.disabled` — same name, same shape, no reshaping needed. MUI already blocks
+click/keyboard interaction on the control internally once `disabled` is set (its `AccordionSummary`
+renders as a real disabled `<button>`); the visual dim is Recursica's own, not MUI's default.
+**Implementation:** `AccordionItem` destructures `disabled` explicitly (rather than letting it
+ride through in `...rest`) so it can also drive `data-disabled` on the item root for the dim.
+MUI's own default disabled treatment — a separate hardcoded background/opacity on both the
+item root and the control (`.Mui-disabled`) — is neutralized in `Accordion.module.css` so the
+token-driven `.item[data-disabled]` dim is the single source of truth.
+
+---
+
+## 4. Chevron via `expandIcon` wrapper
+
+**Decision:** MUI's expand indicator is set through `AccordionSummary.expandIcon`, not a
+child. Recursica's container-level `chevron` (or the default arrow) is threaded through
+context and rendered into that slot.
+**Implementation:** `AccordionControl` resolves `ctx?.chevron ?? <ChevronIcon />` and passes
+it as `expandIcon={<span className={styles.chevron}>{resolvedChevron}</span>}`.
+
+---
+
+## 5. Transparent background for `Layer` overrides
+
+**Decision:** Same reasoning as the Mantine adapter's hover-fix note — MUI's `Paper`-derived
+`Accordion` root ships its own background; Recursica needs it transparent so ambient `Layer`
+tokens can apply.
+**Implementation:** `AccordionItem` merges `backgroundColor: "transparent"` into `style`
+ahead of any caller-supplied `style`, and forces `disableGutters`/`elevation={0}`/`square` to
+strip MUI's own spacing/elevation/border-radius defaults.

package/src/components/Accordion/Accordion.module.css

@@ -168,11 +168,11 @@
   margin: 0 !important;
 }
 
-/* Mantine natively places hover states on the control node. We explicitly re-apply our own
+/* MUI natively places hover states on the control node. We explicitly re-apply our own
    constant background (MUI's native :hover CSS would otherwise show through) and use an
    overlay ::after structure with the generic hover tokens for the actual hover tint; no per-item
    hover-color/hover-opacity tokens exist anymore. */
-.control:hover {
+.control:hover:not(:disabled) {
   background-color: var(
     --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_background-color
   );
@@ -192,6 +192,25 @@
   opacity: var(--recursica_brand_states_hover_opacity);
 }
 
+/* MUI applies its own default disabled treatment on both the item root and the control
+   (`.Mui-disabled`, each with its own hardcoded background/opacity) — neutralized here so the
+   token-driven dim below is the single source of truth. */
+.item:global(.Mui-disabled) {
+  background-color: transparent;
+}
+.control:global(.Mui-disabled) {
+  opacity: 1;
+}
+
+/* Dims the whole item — control and any currently-visible panel content alike — using the
+   generic disabled opacity token, same convention as every other disabled component in the
+   design system (no accordion-item-specific disabled token exists). MUI's own `disabled` prop
+   already blocks click/keyboard interaction on the control internally; this only handles the
+   visual dim. */
+.item[data-disabled] {
+  opacity: var(--recursica_brand_states_disabled);
+}
+
 /* Label logic inside the Control wrapper */
 .label {
   flex: 1;

package/src/components/Accordion/Accordion.stories.tsx

@@ -123,6 +123,44 @@ export const WithIcons: StoryObj<typeof Accordion> = {
   },
 };
 
+export const Disabled: StoryObj<typeof Accordion> = {
+  render: () => {
+    return (
+      <Layer layer={0} style={{ padding: "24px" }}>
+        <Accordion defaultValue="expanded-disabled" chevron={<ChevronIcon />}>
+          <Accordion.Item value="expanded-disabled" disabled>
+            <Accordion.Control leftIcon={<SVGIcon />}>
+              Expanded and Disabled
+            </Accordion.Control>
+            <Accordion.Panel>
+              This item starts expanded so the panel content's dimming can be
+              verified alongside the control's, not just the collapsed header.
+            </Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item value="collapsed-disabled" disabled>
+            <Accordion.Control leftIcon={<SVGIcon />}>
+              Collapsed and Disabled
+            </Accordion.Control>
+            <Accordion.Panel>
+              Clicking or tabbing to this control should have no effect.
+            </Accordion.Panel>
+          </Accordion.Item>
+
+          <Accordion.Item value="enabled">
+            <Accordion.Control leftIcon={<SVGIcon />}>
+              Enabled, for Comparison
+            </Accordion.Control>
+            <Accordion.Panel>
+              A normal, interactive item alongside the disabled ones above.
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      </Layer>
+    );
+  },
+};
+
 export const LayerOne: StoryObj<typeof Accordion> = {
   render: () => {
     return (

package/src/components/Accordion/Accordion.tsx

@@ -17,6 +17,7 @@ import {
   type RecursicaAccordionProps,
   type RecursicaAccordionItemProps,
   type RecursicaAccordionControlProps,
+  type RecursicaAccordionPanelProps,
 } from "@recursica/adapter-common";
 
 const ChevronIcon = () => (
@@ -48,7 +49,7 @@ export type AccordionProps = RecursicaOverStyled<
 const AccordionBase = forwardRef<HTMLDivElement, AccordionProps>(
   function Accordion(
     {
-      variant = "unstyled",
+      variant = "default",
       overStyled = false,
       value,
       defaultValue,
@@ -96,9 +97,9 @@ const AccordionBase = forwardRef<HTMLDivElement, AccordionProps>(
       >
         <div
           ref={ref}
+          {...(sanitizedProps as React.HTMLAttributes<HTMLDivElement>)}
           className={finalClass}
           data-variant={variant}
-          {...(sanitizedProps as React.HTMLAttributes<HTMLDivElement>)}
         >
           {children}
         </div>
@@ -109,7 +110,15 @@ const AccordionBase = forwardRef<HTMLDivElement, AccordionProps>(
 AccordionBase.displayName = "Accordion";
 
 export type AccordionItemWrapperProps = RecursicaOverStyled<
-  Omit<MuiAccordionProps, "children" | "value"> & {
+  // `expanded`/`onChange` are computed internally from the group context — omitted so a
+  // caller can't silently detach this item from the controlled state. `defaultExpanded` has
+  // no meaning here since expansion is always driven by the group's `value`. `disabled` is
+  // shared as-is with `RecursicaAccordionItemProps.disabled` — same name, same shape, no
+  // reshaping needed; see ACCORDION_IMPLEMENTATION_NOTES.md.
+  Omit<
+    MuiAccordionProps,
+    "children" | "value" | "expanded" | "onChange" | "defaultExpanded"
+  > & {
     children?: React.ReactNode;
     value: string;
   } & RecursicaAccordionItemProps
@@ -125,6 +134,7 @@ export const AccordionItem = forwardRef<
     divider = true,
     children,
     value,
+    disabled = false,
     overStyled = false,
     style,
     ...rest
@@ -157,17 +167,19 @@ export const AccordionItem = forwardRef<
   return (
     <MuiAccordion
       ref={ref}
+      {...(sanitizedProps as unknown as Omit<
+        MuiAccordionProps,
+        "expanded" | "onChange" | "defaultExpanded" | "disabled"
+      >)}
       className={finalClass}
       disableGutters
       elevation={0}
       square
       expanded={isExpanded}
       onChange={handleChange}
+      disabled={disabled}
+      data-disabled={disabled || undefined}
       style={mergedStyle}
-      {...(sanitizedProps as unknown as Omit<
-        MuiAccordionProps,
-        "expanded" | "onChange"
-      >)}
     >
       {
         (title ? (
@@ -187,7 +199,9 @@ AccordionItem.displayName = "AccordionItem";
 
 // ==== ACCORDION CONTROL ====
 export type AccordionControlWrapperProps = RecursicaOverStyled<
-  MuiAccordionSummaryProps & RecursicaAccordionControlProps
+  // `expandIcon` is resolved internally from the container's `chevron` (via context) —
+  // omitted so a caller can't silently override it with MUI's native chevron slot.
+  Omit<MuiAccordionSummaryProps, "expandIcon"> & RecursicaAccordionControlProps
 >;
 
 export const AccordionControl = forwardRef<
@@ -210,9 +224,9 @@ export const AccordionControl = forwardRef<
   return (
     <MuiAccordionSummary
       ref={ref}
+      {...(sanitizedProps as unknown as MuiAccordionSummaryProps)}
       className={finalClass}
       expandIcon={<span className={styles.chevron}>{resolvedChevron}</span>}
-      {...(sanitizedProps as unknown as MuiAccordionSummaryProps)}
     >
       {leftIcon && (
         <span className={styles.iconLeftWrapper} aria-hidden>
@@ -226,8 +240,9 @@ export const AccordionControl = forwardRef<
 AccordionControl.displayName = "AccordionControl";
 
 // ==== ACCORDION PANEL ====
-export type AccordionPanelWrapperProps =
-  RecursicaOverStyled<MuiAccordionDetailsProps>;
+export type AccordionPanelWrapperProps = RecursicaOverStyled<
+  MuiAccordionDetailsProps & RecursicaAccordionPanelProps
+>;
 
 export const AccordionPanel = forwardRef<
   HTMLDivElement,
@@ -243,8 +258,8 @@ export const AccordionPanel = forwardRef<
   return (
     <MuiAccordionDetails
       ref={ref}
-      className={finalClass}
       {...(sanitizedProps as unknown as MuiAccordionDetailsProps)}
+      className={finalClass}
     >
       <div className={styles.content}>{children}</div>
     </MuiAccordionDetails>

package/src/components/AssistiveElement/ASSISTIVEELEMENT_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,59 @@
+# AssistiveElement – implementation notes
+
+Decisions and design tweaks specific to the UI Kit's AssistiveElement wrapped against
+`@mui/material`.
+
+---
+
+## 1. Forced `component="div"` trades away `FormHelperText`'s default semantics
+
+**Decision:** `FormHelperText` renders a `<p>` by default — a reasonable semantic choice for
+standalone helper/error text. This adapter forces `component="div"` instead, purely so the
+icon + text can sit side by side in a flex row; `<p>` can't contain the flex layout the same
+way without other tradeoffs.
+**Implementation:** `component="div"` and `error={isError}` (derived from `assistiveVariant`)
+are both computed internally and omitted from `AssistiveElementProps` (`Omit<FormHelperTextProps,
+"error" | "component">`) so a caller can't silently override either via spread.
+`aria-describedby`/`aria-errormessage` association with a field is a different story: this
+component has no reference to any sibling field, so it can't wire that itself. It's already
+handled one layer up, in `FormControlWrapper` — which generates the ids, passes them down via
+this component's own `id` prop, and clones `aria-describedby`/`aria-errormessage` onto the
+field. Only a fully standalone `<AssistiveElement>` used outside `FormControlWrapper` still
+needs that wiring done by hand. `role="alert"` for the error variant is handled here instead
+(see §4) — that piece genuinely belongs at this component's own level.
+
+---
+
+## 2. CSS specificity tie against MUI's own `.Mui-error` color
+
+**Decision:** MUI's `FormHelperText` sets its own error color via `.MuiFormHelperText-root.Mui-error`
+(two classes) whenever `error` is set. Our own `.root[data-variant="error"]` (one class + one
+attribute) lands at the _same_ specificity — without help, whichever rule loads later in the
+merged stylesheet wins, which is import-order luck rather than a deterministic override.
+**Implementation:** `!important` on that one rule's `color` guarantees ours wins regardless of
+load order (same reasoning as the focus-ring override in the Accordion adapter). Not needed for
+the `help` variant — MUI's unconditional base `color` on `.root` alone already has lower
+specificity than our attribute-qualified rule there.
+
+---
+
+## 3. Native passthrough capabilities, left unblocked and undocumented
+
+**Decision:** `FormHelperText`'s own `disabled`/`filled`/`focused`/`margin`/`required`/`variant`/
+`classes`/`sx` all pass straight through today (none of them are omitted, and none are
+computed internally so there's nothing for them to silently override). They're also not added
+to `RecursicaAssistiveElementProps` — same "accidental passthrough" class as Accordion's
+`disabled` was before it got formalized. Known asymmetry: MUI callers can reach for these
+today, Mantine callers can't (Mantine's `AssistiveElement` wraps no native component at all).
+Revisit if a real use case shows up for any of them.
+
+---
+
+## 4. `role="alert"` defaults on for the error variant
+
+**Decision:** Error text needs to be announced by assistive tech as it appears or changes;
+static help text doesn't. Rather than requiring every integrator to remember `role="alert"`,
+`assistiveVariant="error"` defaults it automatically.
+**Implementation:** `role` is destructured out and resolved as `role ?? (isError ? "alert" :
+undefined)` before rendering — an explicit caller-supplied `role` always wins over the default,
+and `"help"` gets no default at all.

package/src/components/AssistiveElement/AssistiveElement.module.css

@@ -101,10 +101,17 @@
    VARIANTS: Error
    ========================================= */
 
+/* MUI's own `FormHelperText` sets its error color via `.MuiFormHelperText-root.Mui-error`
+   (two classes) whenever `error` is set — the exact same specificity as our own
+   `.root[data-variant="error"]` (one class + one attribute), so whichever rule loads later
+   in the merged stylesheet would otherwise win. `!important` makes ours win deterministically
+   regardless of CSS import order (same reasoning as the focus-ring override elsewhere in this
+   codebase). Not needed for the `help` variant above — MUI's unconditional base `color` on
+   `.root` alone has lower specificity than ours there already. */
 .root[data-variant="error"] {
   color: var(
     --recursica_ui-kit_components_assistive-element_variants_types_error_properties_colors_text-color
-  );
+  ) !important;
 }
 
 .root[data-variant="error"] .icon {

package/src/components/AssistiveElement/AssistiveElement.tsx

@@ -1,15 +1,19 @@
 import React from "react";
 import { FormHelperText, type FormHelperTextProps } from "@mui/material";
-import { filterStylingProps } from "../../utils/filterStylingProps";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
 import styles from "./AssistiveElement.module.css";
 
 import { type RecursicaAssistiveElementProps } from "@recursica/adapter-common";
 
-export interface AssistiveElementProps
-  extends FormHelperTextProps,
-    RecursicaAssistiveElementProps {
-  overStyled?: boolean;
-}
+// `error`/`component` are computed internally (from `assistiveVariant`, and forced to "div"
+// for layout) — omitted so a caller can't silently override either via spread.
+export type AssistiveElementProps = RecursicaOverStyled<
+  Omit<FormHelperTextProps, "error" | "component"> &
+    RecursicaAssistiveElementProps
+>;
 
 export const AssistiveElement = React.forwardRef<
   HTMLParagraphElement,
@@ -21,6 +25,7 @@ export const AssistiveElement = React.forwardRef<
     overStyled = false,
     className,
     children,
+    role,
     ...rest
   } = props;
 
@@ -61,15 +66,20 @@ export const AssistiveElement = React.forwardRef<
   // Map to MUI's native error prop if it's explicitly an error state
   const isError = assistiveVariant === "error";
 
+  // Announce error text as it appears/changes; a caller-supplied `role` always wins. No
+  // default for `help` — static descriptive text doesn't need a live region.
+  const resolvedRole = role ?? (isError ? "alert" : undefined);
+
   // Force component = "div" so flex layouts execute correctly inside HelperText
   return (
     <FormHelperText
       ref={ref}
+      {...(sanitizedProps as Omit<FormHelperTextProps, "error" | "component">)}
       component="div"
       error={isError}
+      role={resolvedRole}
       data-variant={assistiveVariant}
       className={className ? `${styles.root} ${className}` : styles.root}
-      {...(sanitizedProps as FormHelperTextProps)}
     >
       {assistiveWithIcon && (
         <div className={styles.icon}>

package/src/components/Autocomplete/Autocomplete.tsx

@@ -134,7 +134,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
         label={label}
         assistiveText={assistiveText}
         assistiveWithIcon={assistiveWithIcon}
-        error={!!error}
+        error={error}
         required={required}
         id={id}
         disabled={disabled}
@@ -165,13 +165,29 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
             }}
             options={data || []}
             renderInput={(params) => {
-              // eslint-disable-next-line @typescript-eslint/no-unused-vars
               const { InputProps, ...restParams } = params;
               return (
                 <MuiTextField
                   {...restParams}
                   placeholder={placeholder}
                   variant="standard"
+                  InputProps={{
+                    ...InputProps,
+                    startAdornment: leftSection ? (
+                      <span className={styles.section} data-position="left">
+                        {leftSection}
+                      </span>
+                    ) : (
+                      InputProps.startAdornment
+                    ),
+                    endAdornment: rightSection ? (
+                      <span className={styles.section} data-position="right">
+                        {rightSection}
+                      </span>
+                    ) : (
+                      InputProps.endAdornment
+                    ),
+                  }}
                 />
               );
             }}

package/src/components/Avatar/AVATAR_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,36 @@
+# Avatar Component Implementation Notes
+
+## Architecture Decisions
+
+The `Avatar` component is an adapter over MUI's `Avatar`.
+
+- We do not wrap `MuiAvatar` in any custom standard `div` elements, preserving DOM structure.
+- All styles strictly pull from explicit `--recursica_ui-kit_components_avatar_*` CSS tokens.
+
+## `data-style`/`data-variant`, not MUI's own classes
+
+Same reasoning as the Mantine adapter: `data-style="image|icon|text"` is set based on which of
+`src`/`icon`/`children` is present, and `data-variant` carries Recursica's own `variant` value
+(`"solid"|"outline"|"ghost"`) — `Avatar.module.css` keys every visual treatment (background,
+border, border-radius) off these two attributes, not off anything MUI's own classes do.
+
+## `variant` — a name collision with a different meaning, not a shared concept
+
+**Found while auditing this component (not in Forge's original report):** MUI's native
+`Avatar.variant` means **shape** (`'circular'|'rounded'|'square'`) — unlike almost every other
+MUI component (including Mantine's `Avatar.variant`, which really is the same color-treatment
+concept Recursica's `variant` is), MUI repurposes this name for something else entirely.
+
+The previous implementation mapped Recursica's `variant` (`solid|outline|ghost`) to strings
+(`"filled"|"outline"|"transparent"`) and fed them into MUI's native `variant` prop via an
+`as unknown as MuiAvatarProps["variant"]` cast — none of those strings are valid MUI shape
+values, so it was silently a no-op on MUI's own shape class (visually masked only because
+`Avatar.module.css` already forces border-radius per `data-style` unconditionally, regardless
+of what shape class MUI resolves to).
+
+**Fix:** stopped feeding Recursica's `variant` into MUI's native `variant` prop at all.
+`<MuiAvatar>` is now given an explicit, real, valid `variant="circular"` — Recursica has no
+shape concept of its own to expose here, and avatars are always circular by design, so this is
+just being explicit about that instead of relying on MUI's own default. `Omit<MuiAvatarProps,
+"variant">` in the type prevents a caller from reaching MUI's real shape prop under Recursica's
+`variant` name and getting confused about what it does.

package/src/components/Avatar/Avatar.tsx

@@ -11,9 +11,12 @@ import styles from "./Avatar.module.css";
 
 import { type RecursicaAvatarProps } from "@recursica/adapter-common";
 
+// MUI's native `variant` is Avatar's *shape* ('circular'|'rounded'|'square'), not a color
+// treatment like every other MUI component's `variant` — unlike Mantine's, where `variant`
+// really is the same color-treatment concept ours is. Omitted so Recursica's own `variant`
+// (a completely different concept) can't be confused with it; see AVATAR_IMPLEMENTATION_NOTES.md.
 export type AvatarProps = RecursicaOverStyled<
-  Omit<MuiAvatarProps, "variant" | "size" | "color" | "radius"> &
-    RecursicaAvatarProps
+  Omit<MuiAvatarProps, "variant"> & RecursicaAvatarProps
 >;
 
 const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
@@ -28,12 +31,6 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
   },
   ref,
 ) {
-  const mapVariant = {
-    solid: "filled",
-    outline: "outline",
-    ghost: "transparent",
-  } as const;
-
   const sanitizedProps = filterStylingProps(rest, overStyled);
   const restRecord = sanitizedProps as Record<string, unknown>;
 
@@ -74,7 +71,7 @@ const _Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
       ref={ref}
       className={classNameProp}
       classes={mergedClassNames}
-      variant={mapVariant[variant] as unknown as MuiAvatarProps["variant"]}
+      variant="circular"
       src={src}
       data-variant={variant}
       data-size={size}

package/src/components/Badge/Badge.module.css

@@ -113,15 +113,3 @@
     --recursica_ui-kit_components_badge_variants_styles_warning_properties_colors_text-color
   );
 }
-
-/* Target Mantine internal children if needed for typography constraints */
-.root :global(.mantine-Badge-label),
-.root :global(.mantine-Badge-section) {
-  /* HARDCODE: Prevent Mantine from overriding our typography setup inside inner wrappers */
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  letter-spacing: inherit;
-  text-transform: inherit;
-}

package/src/components/Badge/Badge.tsx

@@ -26,8 +26,6 @@ const _Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
 
   const mergedClassNames: Partial<Record<string, string>> = {
     root: styles.root,
-    section: styles.section,
-    label: styles.label,
   };
 
   const classNamesProp = (sanitizedProps as Record<string, unknown>).classNames;
@@ -38,8 +36,6 @@ const _Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   ) {
     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 classNameProp = (sanitizedProps as Record<string, unknown>)

package/src/components/Card/Card.tsx

@@ -77,9 +77,9 @@ const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
   return (
     <MuiCard
       ref={ref}
+      {...(sanitizedProps as unknown as MuiCardProps)}
       className={classNameProp}
       classes={mergedClassNames}
-      {...(sanitizedProps as unknown as MuiCardProps)}
     />
   );
 });
@@ -100,10 +100,10 @@ export const CardSection = forwardRef<HTMLDivElement, CardSectionProps>(
     return (
       <div
         ref={ref}
+        {...(sanitizedProps as unknown as React.HTMLAttributes<HTMLDivElement>)}
         className={
           classNameProp ? `${styles.section} ${classNameProp}` : styles.section
         }
-        {...(sanitizedProps as unknown as React.HTMLAttributes<HTMLDivElement>)}
       />
     );
   },
@@ -125,10 +125,10 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
     return (
       <div
         ref={ref}
+        {...(sanitizedProps as unknown as React.HTMLAttributes<HTMLDivElement>)}
         className={
           classNameProp ? `${styles.header} ${classNameProp}` : styles.header
         }
-        {...(sanitizedProps as unknown as React.HTMLAttributes<HTMLDivElement>)}
       />
     );
   },
@@ -150,10 +150,10 @@ export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
     return (
       <div
         ref={ref}
+        {...(sanitizedProps as unknown as React.HTMLAttributes<HTMLDivElement>)}
         className={
           classNameProp ? `${styles.footer} ${classNameProp}` : styles.footer
         }
-        {...(sanitizedProps as unknown as React.HTMLAttributes<HTMLDivElement>)}
       />
     );
   },
@@ -177,10 +177,10 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
     return (
       <div
         ref={ref}
+        {...sanitizedProps}
         className={
           classNameProp ? `${styles.content} ${classNameProp}` : styles.content
         }
-        {...sanitizedProps}
       />
     );
   },