@recursica/mui-adapter 0.6.0 → 0.7.0

package/src/components/Modal/Modal.tsx

@@ -1,7 +1,14 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import {
-  Modal as MuiModal,
-  type ModalProps as MuiModalProps,
+  Dialog as MuiDialog,
+  type DialogProps as MuiDialogProps,
+  DialogTitle as MuiDialogTitle,
+  type DialogTitleProps as MuiDialogTitleProps,
+  DialogContent as MuiDialogContent,
+  type DialogContentProps as MuiDialogContentProps,
+  DialogActions as MuiDialogActions,
+  type DialogActionsProps as MuiDialogActionsProps,
+  IconButton as MuiIconButton,
 } from "@mui/material";
 import {
   filterStylingProps,
@@ -9,125 +16,128 @@ import {
 } from "../../utils/filterStylingProps";
 import styles from "./Modal.module.css";
 
-/**
- * Properties for the strictly-tokenized Modal component.
- * Native Mui abstract properties like `size`, `radius`, and `shadow` have been stripped out
- * because they directly conflict with the non-negotiable pixel boundaries defined in the Recursica UI Kit.
- */
+// ============================================================
+// MODAL ROOT (Dialog)
+// ============================================================
+
+import { type RecursicaModalProps } from "@recursica/adapter-common";
+
 export type ModalProps = RecursicaOverStyled<
-  Omit<MuiModalProps, "size" | "radius" | "shadow">
+  Omit<MuiDialogProps, "size" | "radius" | "shadow" | "open"> &
+    RecursicaModalProps
 >;
 
-/**
- * The `Modal` component displays a window overlaid on the primary viewport.
- *
- * **Recursica Abstract:**
- * This component acts as a strict structural wrapper around Mui's `<Modal>`.
- * It automatically enforces Figma UI Kit geometries (`max-width: 960px`, `min-width: 304px`)
- * and handles internal body scrolling explicitly via CSS module overrides.
- *
- * @example
- * ```tsx
- * <Modal opened={opened} onClose={close} title="Hello World">
- *   Modal Content
- * </Modal>
- * ```
- */
-const ModalInner = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(
+const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+
+const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
   {
     overStyled = false,
-    children,
-    title,
+    opened = false,
     withCloseButton = true,
-    overlayProps,
-    withOverlay = true,
-    closeButtonProps,
+    title,
+    children,
+    onClose,
+    className,
     ...rest
   },
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
 
-  const mergedClassNames: Partial<Record<string, string>> = {
-    root: styles.root,
-    inner: styles.inner,
-    content: styles.content,
-    header: styles.header,
-    title: styles.title,
-    close: styles.close,
-  };
-
-  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];
-      }
-    });
-  }
+  let footer: React.ReactNode = null;
+  const bodyChildren: React.ReactNode[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (
+      React.isValidElement(child) &&
+      (child.type === ModalFooter ||
+        (child.type as any)?.displayName === "Modal.Footer")
+    ) {
+      footer = child;
+    } else {
+      bodyChildren.push(child);
+    }
+  });
 
   return (
-    <div
+    <MuiDialog
       ref={ref}
-      classes={mergedClassNames}
-      {...(sanitizedProps as unknown as Omit<
-        MuiModalProps,
-        "size" | "radius" | "shadow"
-      >)}
+      className={`${styles.root} ${className || ""}`}
+      classes={{
+        paper: styles.inner,
+      }}
+      {...(sanitizedProps as MuiDialogProps)}
+      open={opened || (sanitizedProps as any).open}
+      onClose={onClose}
     >
-      {withOverlay && <div {...overlayProps} />}
-      <div>
-        {(title || withCloseButton) && (
-          <div>
-            {title && <div>{title}</div>}
-            {withCloseButton && <div {...closeButtonProps} />}
-          </div>
-        )}
-        <ModalBody>{children}</ModalBody>
-      </div>
-    </div>
+      {(title || withCloseButton) && (
+        <div className={styles.header}>
+          {title && <div className={styles.title}>{title}</div>}
+          {withCloseButton && (
+            <MuiIconButton
+              onClick={(e) => onClose?.(e, "backdropClick")}
+              className={styles.close}
+            >
+              <CloseIcon />
+            </MuiIconButton>
+          )}
+        </div>
+      )}
+      <ModalBody>{bodyChildren}</ModalBody>
+      {footer}
+    </MuiDialog>
   );
 });
 
-ModalInner.displayName = "Modal";
-
-/**
- * The `Modal.Footer` provides a perfectly padded container for modal actions.
- *
- * **Recursica Abstract:**
- * By default, this container aligns its children to the right (`justify-content: flex-end`)
- * and applies the standard Figma button-gap spacing.
- *
- * > [!IMPORTANT]
- * > **Button Hierarchy:** Recursica design language explicitly requires that the
- * > primary action button MUST be the right-most element, with the secondary
- * > (outline variant) action placed immediately to the left of it.
- */
-const ModalFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div">
->(function ModalFooter({ className, ...rest }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={`${styles.footer} ${className || ""}`}
-      {...rest}
-    />
-  );
-});
-ModalFooter.displayName = "Modal.Footer";
+ModalRoot.displayName = "Modal";
+
+// ============================================================
+// MODAL TITLE (DialogTitle)
+// ============================================================
+
+export type ModalTitleProps = RecursicaOverStyled<MuiDialogTitleProps>;
+
+const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(
+  function ModalTitle({ overStyled = false, className, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+
+    return (
+      <MuiDialogTitle
+        ref={ref as any}
+        className={`${styles.title} ${className || ""}`}
+        {...(sanitizedProps as MuiDialogTitleProps)}
+      />
+    );
+  },
+);
+
+ModalTitle.displayName = "Modal.Title";
+
+// ============================================================
+// MODAL BODY (DialogContent)
+// ============================================================
 
-const ModalBody = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof MuiModal.Body>
->(function ModalBody({ className, onScroll, children, ...rest }, ref) {
+export type ModalBodyProps = RecursicaOverStyled<MuiDialogContentProps>;
+
+const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(
+  { overStyled = false, className, children, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
   const internalRef = React.useRef<HTMLDivElement>(null);
   const [scrolledTop, setScrolledTop] = React.useState(false);
   const [scrolledBottom, setScrolledBottom] = React.useState(false);
@@ -140,81 +150,69 @@ const ModalBody = React.forwardRef<
     }
   }, []);
 
-  // Re-check scroll on mount and window resize
   React.useEffect(() => {
     checkScroll();
     window.addEventListener("resize", checkScroll);
     return () => window.removeEventListener("resize", checkScroll);
   }, [checkScroll, children]);
 
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    checkScroll();
-    onScroll?.(e);
-  };
-
-  // Intercept children to pull Modal.Footer out of the scrolling container
-  let footer: React.ReactNode = null;
-  const bodyChildren: React.ReactNode[] = [];
-
-  React.Children.forEach(children, (child) => {
-    if (
-      React.isValidElement(child) &&
-      (child.type === ModalFooter ||
-        (child.type as React.ComponentType)?.displayName === "Modal.Footer")
-    ) {
-      footer = child;
-    } else {
-      bodyChildren.push(child);
-    }
-  });
-
   return (
-    <div
-      {...rest}
+    <MuiDialogContent
       ref={(node) => {
-        if (typeof ref === "function") ref(node);
+        if (typeof ref === "function") ref(node as any);
         else if (ref)
-          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current =
+            node as any;
+        if (internalRef)
+          (
+            internalRef as React.MutableRefObject<HTMLDivElement | null>
+          ).current = node as HTMLDivElement;
       }}
-      className={`${styles.bodyWrapper} ${className || ""}`}
+      onScroll={() => checkScroll()}
+      data-scrolled-top={scrolledTop || undefined}
+      data-scrolled-bottom={scrolledBottom || undefined}
+      className={`${styles.content} ${styles.scrollArea} ${className || ""}`}
+      {...(sanitizedProps as MuiDialogContentProps)}
     >
-      <div
-        ref={internalRef}
-        onScroll={handleScroll}
-        data-scrolled-top={scrolledTop || undefined}
-        data-scrolled-bottom={scrolledBottom || undefined}
-        className={styles.scrollArea}
-      >
-        {bodyChildren}
-      </div>
-      {footer}
-    </div>
+      {children}
+    </MuiDialogContent>
   );
 });
+
 ModalBody.displayName = "Modal.Body";
 
-interface ModalComponent
-  extends React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<HTMLDivElement>
-  > {
-  Root: typeof MuiModal.Root;
-  Overlay: typeof MuiModal.Overlay;
-  Content: typeof MuiModal.Content;
-  Header: typeof MuiModal.Header;
-  Title: typeof MuiModal.Title;
-  CloseButton: typeof MuiModal.CloseButton;
-  Body: typeof ModalBody;
-  Footer: typeof ModalFooter;
-}
+// ============================================================
+// MODAL FOOTER (DialogActions)
+// ============================================================
+
+export type ModalFooterProps = RecursicaOverStyled<MuiDialogActionsProps>;
 
-export const Modal = ModalInner as ModalComponent & {
+const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
+  function ModalFooter({ overStyled = false, className, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+
+    return (
+      <MuiDialogActions
+        ref={ref as any}
+        className={`${styles.footer} ${className || ""}`}
+        {...(sanitizedProps as MuiDialogActionsProps)}
+      />
+    );
+  },
+);
+
+ModalFooter.displayName = "Modal.Footer";
+
+// ============================================================
+// EXPORT COMPOSITION
+// ============================================================
+
+export const Modal = ModalRoot as typeof ModalRoot & {
+  Title: typeof ModalTitle;
+  Body: typeof ModalBody;
   Footer: typeof ModalFooter;
 };
-Modal.Root = MuiModal.Root;
-Modal.Overlay = MuiModal.Overlay;
-Modal.Content = MuiModal.Content;
-Modal.Header = MuiModal.Header;
-Modal.Title = MuiModal.Title;
-Modal.CloseButton = MuiModal.CloseButton;
+
+Modal.Title = ModalTitle;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;

package/src/components/NumberInput/NumberInput.tsx

@@ -12,6 +12,8 @@ import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/For
 import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
 import styles from "./NumberInput.module.css";
 
+import { type RecursicaNumberInputProps as BaseRecursicaNumberInputProps } from "@recursica/adapter-common";
+
 export interface RecursicaNumberInputProps
   extends Omit<
       MuiNumberInputProps,
@@ -28,10 +30,8 @@ export interface RecursicaNumberInputProps
       | "labelWithEditIcon"
       | "onLabelEditClick"
     >,
-    ReadOnlyControlProps {
-  /** Enables/disables the controls to increment and decrement the value */
-  hideControls?: boolean;
-}
+    ReadOnlyControlProps,
+    BaseRecursicaNumberInputProps {}
 
 export type NumberInputProps = RecursicaOverStyled<RecursicaNumberInputProps>;
 
@@ -53,7 +53,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       assistiveWithIcon,
       error,
       required,
-      withAsterisk,
+      // removed withAsterisk
       id,
       className,
       style,
@@ -63,6 +63,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       emptyValueComponent,
       value,
       defaultValue,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       hideControls = false,
       ...rest
     } = props;
@@ -106,7 +107,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         assistiveWithIcon={assistiveWithIcon}
         error={error}
         required={required}
-        withAsterisk={withAsterisk}
         id={id}
         readOnly={readOnly}
         readOnlyComponent={readOnlyComponent}
@@ -124,21 +124,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             disabled={disabled}
             value={value}
             defaultValue={defaultValue}
-            hideControls={hideControls}
             label={undefined}
-            description={undefined}
             error={undefined}
             required={undefined}
-            withAsterisk={undefined}
-            wrapperProps={{
-              "data-disabled": disabled ? "true" : undefined,
-              "data-error": error ? "true" : undefined,
-              "data-with-left-section": restRecord.leftSection
-                ? "true"
-                : undefined,
-              "data-with-right-section":
-                restRecord.rightSection || !hideControls ? "true" : undefined,
-            }}
             {...(sanitizedProps as unknown as MuiNumberInputProps)}
           />
         }

package/src/components/Pagination/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,3 @@
+# Pagination Implementation Notes
+
+- **Compositional API Dropped:** Mantine's original `Pagination` component relies heavily on dot-notation sub-components (`Pagination.Root`, `Pagination.Items`, `Pagination.Control`, etc.). MUI's `<Pagination>` is fundamentally monolithic. Following architectural review, we have decided to drop the dot-notation wrappers for `mui-adapter` and rely strictly on MUI's monolithic API. Storybook and visual regression tests have been updated to reflect this divergence while retaining core property mapping compatibility.

package/src/components/Pagination/Pagination.module.css

@@ -98,42 +98,33 @@
 
   /* Typography */
   font-family: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family,
-    var(--recursica_brand_fonts_primary)
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size,
-    var(--recursica_brand_dimensions_text-size_default)
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size
   );
   font-style: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-style,
-    normal
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-style
   );
   font-weight: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight,
-    500
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing,
-    0
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height,
-    1.5
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration,
-    none
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-transform,
-    none
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-transform
   );
 
   /* Dimensions */
   border-radius: var(
-    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius,
-    4px
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius
   );
   height: var(
     --recursica_ui-kit_components_button_variants_sizes_default_properties_height
@@ -192,8 +183,7 @@
 
 .control:hover:not(:disabled)::after {
   opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
   );
 }
 
@@ -270,8 +260,7 @@
 }
 .control[data-variant="text"]:hover:not(:disabled)::after {
   opacity: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity,
-    0.1
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_hover-opacity
   );
 }
 
@@ -296,8 +285,7 @@
   display: flex;
   align-items: center;
   gap: var(
-    --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap,
-    4px
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap
   );
 }
 

package/src/components/Pagination/Pagination.stories.tsx

@@ -40,14 +40,6 @@ export const WithEdges: Story = {
   },
 };
 
-export const Compositional: Story = {
-  render: () => (
-    <Pagination.Root total={10}>
-      <Pagination.Items />
-    </Pagination.Root>
-  ),
-};
-
 export const WithTextLabels: Story = {
   args: {
     withEdges: true,