@recursica/mantine-adapter 0.33.0 → 0.35.0

package/src/components/Modal/Modal.tsx

@@ -2,6 +2,12 @@ import React from "react";
 import {
   Modal as MantineModal,
   type ModalProps as MantineModalProps,
+  type ModalRootProps as MantineModalRootProps,
+  type ModalOverlayProps as MantineModalOverlayProps,
+  type ModalContentProps as MantineModalContentProps,
+  type ModalHeaderProps as MantineModalHeaderProps,
+  type ModalTitleProps as MantineModalTitleProps,
+  type ModalCloseButtonProps as MantineModalCloseButtonProps,
 } from "@mantine/core";
 import {
   filterStylingProps,
@@ -114,18 +120,22 @@ ModalInner.displayName = "Modal";
  * > 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,
+export type ModalFooterProps = RecursicaOverStyled<
   React.ComponentPropsWithoutRef<"div">
->(function ModalFooter({ className, ...rest }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={`${styles.footer} ${className || ""}`}
-      {...rest}
-    />
-  );
-});
+>;
+
+const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(
+  function ModalFooter({ overStyled = false, className, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <div
+        ref={ref}
+        className={`${styles.footer} ${className || ""}`}
+        {...sanitizedProps}
+      />
+    );
+  },
+);
 ModalFooter.displayName = "Modal.Footer";
 
 const ModalBody = React.forwardRef<
@@ -197,16 +207,112 @@ const ModalBody = React.forwardRef<
 });
 ModalBody.displayName = "Modal.Body";
 
+// ============================================================
+// MODAL SUB-COMPONENTS (wrapped so overStyled/filterStylingProps applies)
+// ============================================================
+
+export type ModalRootProps = RecursicaOverStyled<MantineModalRootProps>;
+
+const ModalRoot = React.forwardRef<HTMLDivElement, ModalRootProps>(
+  function ModalRoot({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineModal.Root
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineModalRootProps)}
+      />
+    );
+  },
+);
+ModalRoot.displayName = "Modal.Root";
+
+export type ModalOverlayProps = RecursicaOverStyled<MantineModalOverlayProps>;
+
+const ModalOverlay = React.forwardRef<HTMLDivElement, ModalOverlayProps>(
+  function ModalOverlay({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineModal.Overlay
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineModalOverlayProps)}
+      />
+    );
+  },
+);
+ModalOverlay.displayName = "Modal.Overlay";
+
+export type ModalContentProps = RecursicaOverStyled<MantineModalContentProps>;
+
+const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(
+  function ModalContent({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineModal.Content
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineModalContentProps)}
+      />
+    );
+  },
+);
+ModalContent.displayName = "Modal.Content";
+
+export type ModalHeaderProps = RecursicaOverStyled<MantineModalHeaderProps>;
+
+const ModalHeader = React.forwardRef<HTMLElement, ModalHeaderProps>(
+  function ModalHeader({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineModal.Header
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineModalHeaderProps)}
+      />
+    );
+  },
+);
+ModalHeader.displayName = "Modal.Header";
+
+export type ModalTitleProps = RecursicaOverStyled<MantineModalTitleProps>;
+
+const ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(
+  function ModalTitle({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineModal.Title
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineModalTitleProps)}
+      />
+    );
+  },
+);
+ModalTitle.displayName = "Modal.Title";
+
+export type ModalCloseButtonProps =
+  RecursicaOverStyled<MantineModalCloseButtonProps>;
+
+const ModalCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  ModalCloseButtonProps
+>(function ModalCloseButton({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MantineModal.CloseButton
+      ref={ref}
+      {...(sanitizedProps as unknown as MantineModalCloseButtonProps)}
+    />
+  );
+});
+ModalCloseButton.displayName = "Modal.CloseButton";
+
 interface ModalComponent
   extends React.ForwardRefExoticComponent<
     ModalProps & React.RefAttributes<HTMLDivElement>
   > {
-  Root: typeof MantineModal.Root;
-  Overlay: typeof MantineModal.Overlay;
-  Content: typeof MantineModal.Content;
-  Header: typeof MantineModal.Header;
-  Title: typeof MantineModal.Title;
-  CloseButton: typeof MantineModal.CloseButton;
+  Root: typeof ModalRoot;
+  Overlay: typeof ModalOverlay;
+  Content: typeof ModalContent;
+  Header: typeof ModalHeader;
+  Title: typeof ModalTitle;
+  CloseButton: typeof ModalCloseButton;
   Body: typeof ModalBody;
   Footer: typeof ModalFooter;
 }
@@ -214,11 +320,11 @@ interface ModalComponent
 export const Modal = ModalInner as ModalComponent & {
   Footer: typeof ModalFooter;
 };
-Modal.Root = MantineModal.Root;
-Modal.Overlay = MantineModal.Overlay;
-Modal.Content = MantineModal.Content;
-Modal.Header = MantineModal.Header;
-Modal.Title = MantineModal.Title;
-Modal.CloseButton = MantineModal.CloseButton;
+Modal.Root = ModalRoot;
+Modal.Overlay = ModalOverlay;
+Modal.Content = ModalContent;
+Modal.Header = ModalHeader;
+Modal.Title = ModalTitle;
+Modal.CloseButton = ModalCloseButton;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;

package/src/components/Pagination/Pagination.tsx

@@ -4,6 +4,8 @@ import {
   Pagination as MantinePagination,
   type PaginationProps as MantinePaginationProps,
   type PaginationRootProps as MantinePaginationRootProps,
+  type PaginationControlProps as MantinePaginationControlProps,
+  type PaginationDotsProps as MantinePaginationDotsProps,
 } from "@mantine/core";
 import {
   filterStylingProps,
@@ -28,11 +30,13 @@ export type PaginationRootProps =
   RecursicaOverStyled<MantinePaginationRootProps>;
 
 export type PaginationEdgeProps<T extends React.ElementType> =
-  React.ComponentProps<T> & {
-    /** If set to true, displays text labels alongside the icon. */
-    withLabel?: boolean;
-    icon?: any;
-  };
+  RecursicaOverStyled<
+    React.ComponentProps<T> & {
+      /** If set to true, displays text labels alongside the icon. */
+      withLabel?: boolean;
+      icon?: any;
+    }
+  >;
 
 function usePaginationClassNames(restRecord: Record<string, unknown>): {
   className: string;
@@ -88,14 +92,18 @@ _PaginationRoot.displayName = "Pagination.Root";
 const _PaginationNext = forwardRef<
   HTMLButtonElement,
   PaginationEdgeProps<typeof MantinePagination.Next>
->(function PaginationNext({ withLabel, icon, ...props }, ref) {
+>(function PaginationNext(
+  { overStyled = false, withLabel, icon, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
   const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
   return (
     <MantinePagination.Next
       ref={ref}
       data-variant="text"
       icon={renderIcon as any}
-      {...props}
+      {...sanitizedProps}
     />
   );
 });
@@ -104,14 +112,18 @@ _PaginationNext.displayName = "Pagination.Next";
 const _PaginationPrevious = forwardRef<
   HTMLButtonElement,
   PaginationEdgeProps<typeof MantinePagination.Previous>
->(function PaginationPrevious({ withLabel, icon, ...props }, ref) {
+>(function PaginationPrevious(
+  { overStyled = false, withLabel, icon, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
   const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
   return (
     <MantinePagination.Previous
       ref={ref}
       data-variant="text"
       icon={renderIcon as any}
-      {...props}
+      {...sanitizedProps}
     />
   );
 });
@@ -120,14 +132,18 @@ _PaginationPrevious.displayName = "Pagination.Previous";
 const _PaginationFirst = forwardRef<
   HTMLButtonElement,
   PaginationEdgeProps<typeof MantinePagination.First>
->(function PaginationFirst({ withLabel, icon, ...props }, ref) {
+>(function PaginationFirst(
+  { overStyled = false, withLabel, icon, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
   const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
   return (
     <MantinePagination.First
       ref={ref}
       data-variant="text"
       icon={renderIcon as any}
-      {...props}
+      {...sanitizedProps}
     />
   );
 });
@@ -136,14 +152,18 @@ _PaginationFirst.displayName = "Pagination.First";
 const _PaginationLast = forwardRef<
   HTMLButtonElement,
   PaginationEdgeProps<typeof MantinePagination.Last>
->(function PaginationLast({ withLabel, icon, ...props }, ref) {
+>(function PaginationLast(
+  { overStyled = false, withLabel, icon, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
   const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
   return (
     <MantinePagination.Last
       ref={ref}
       data-variant="text"
       icon={renderIcon as any}
-      {...props}
+      {...sanitizedProps}
     />
   );
 });
@@ -192,14 +212,47 @@ const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
 );
 _Pagination.displayName = "Pagination";
 
+export type PaginationControlProps =
+  RecursicaOverStyled<MantinePaginationControlProps>;
+
+const _PaginationControl = forwardRef<
+  HTMLButtonElement,
+  PaginationControlProps
+>(function PaginationControl({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MantinePagination.Control
+      ref={ref}
+      {...(sanitizedProps as unknown as MantinePaginationControlProps)}
+    />
+  );
+});
+_PaginationControl.displayName = "Pagination.Control";
+
+export type PaginationDotsProps =
+  RecursicaOverStyled<MantinePaginationDotsProps>;
+
+const _PaginationDots = forwardRef<HTMLDivElement, PaginationDotsProps>(
+  function PaginationDots({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantinePagination.Dots
+        ref={ref}
+        {...(sanitizedProps as unknown as MantinePaginationDotsProps)}
+      />
+    );
+  },
+);
+_PaginationDots.displayName = "Pagination.Dots";
+
 /**
  * Recursica Pagination component wrapping Mantine's Pagination.
  */
 export const Pagination = _Pagination as typeof _Pagination & {
   Root: typeof _PaginationRoot;
   Items: typeof MantinePagination.Items;
-  Control: typeof MantinePagination.Control;
-  Dots: typeof MantinePagination.Dots;
+  Control: typeof _PaginationControl;
+  Dots: typeof _PaginationDots;
   Next: typeof _PaginationNext;
   Previous: typeof _PaginationPrevious;
   First: typeof _PaginationFirst;
@@ -208,9 +261,12 @@ export const Pagination = _Pagination as typeof _Pagination & {
 };
 
 Pagination.Root = _PaginationRoot;
+// Pagination.Items has no styling props of its own (just a `dotsIcon` prop, no
+// `style`/`className`/BoxProps), so re-exporting Mantine's implementation
+// directly is not a styling-gate gap.
 Pagination.Items = MantinePagination.Items;
-Pagination.Control = MantinePagination.Control;
-Pagination.Dots = MantinePagination.Dots;
+Pagination.Control = _PaginationControl;
+Pagination.Dots = _PaginationDots;
 Pagination.Next = _PaginationNext;
 Pagination.Previous = _PaginationPrevious;
 Pagination.First = _PaginationFirst;

package/src/components/Panel/Panel.tsx

@@ -2,6 +2,13 @@ import { forwardRef } from "react";
 import {
   Drawer as MantineDrawer,
   type DrawerProps as MantineDrawerProps,
+  type DrawerRootProps as MantineDrawerRootProps,
+  type DrawerOverlayProps as MantineDrawerOverlayProps,
+  type DrawerContentProps as MantineDrawerContentProps,
+  type DrawerHeaderProps as MantineDrawerHeaderProps,
+  type DrawerTitleProps as MantineDrawerTitleProps,
+  type DrawerCloseButtonProps as MantineDrawerCloseButtonProps,
+  type DrawerBodyProps as MantineDrawerBodyProps,
 } from "@mantine/core";
 import {
   filterStylingProps,
@@ -128,29 +135,142 @@ export const PanelFooter = forwardRef<HTMLDivElement, PanelFooterProps>(
 );
 PanelFooter.displayName = "PanelFooter";
 
+// ============================================================
+// PANEL SUB-COMPONENTS (wrapped so overStyled/filterStylingProps applies)
+// ============================================================
+
+export type PanelRootProps = RecursicaOverStyled<MantineDrawerRootProps>;
+
+export const PanelRoot = forwardRef<HTMLDivElement, PanelRootProps>(
+  function PanelRoot({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineDrawer.Root
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineDrawerRootProps)}
+      />
+    );
+  },
+);
+PanelRoot.displayName = "PanelRoot";
+
+export type PanelOverlayProps = RecursicaOverStyled<MantineDrawerOverlayProps>;
+
+export const PanelOverlay = forwardRef<HTMLDivElement, PanelOverlayProps>(
+  function PanelOverlay({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineDrawer.Overlay
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineDrawerOverlayProps)}
+      />
+    );
+  },
+);
+PanelOverlay.displayName = "PanelOverlay";
+
+export type PanelContentProps = RecursicaOverStyled<MantineDrawerContentProps>;
+
+export const PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(
+  function PanelContent({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineDrawer.Content
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineDrawerContentProps)}
+      />
+    );
+  },
+);
+PanelContent.displayName = "PanelContent";
+
+export type PanelHeaderProps = RecursicaOverStyled<MantineDrawerHeaderProps>;
+
+export const PanelHeader = forwardRef<HTMLElement, PanelHeaderProps>(
+  function PanelHeader({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineDrawer.Header
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineDrawerHeaderProps)}
+      />
+    );
+  },
+);
+PanelHeader.displayName = "PanelHeader";
+
+export type PanelTitleProps = RecursicaOverStyled<MantineDrawerTitleProps>;
+
+export const PanelTitle = forwardRef<HTMLHeadingElement, PanelTitleProps>(
+  function PanelTitle({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineDrawer.Title
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineDrawerTitleProps)}
+      />
+    );
+  },
+);
+PanelTitle.displayName = "PanelTitle";
+
+export type PanelCloseButtonProps =
+  RecursicaOverStyled<MantineDrawerCloseButtonProps>;
+
+export const PanelCloseButton = forwardRef<
+  HTMLButtonElement,
+  PanelCloseButtonProps
+>(function PanelCloseButton({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MantineDrawer.CloseButton
+      ref={ref}
+      {...(sanitizedProps as unknown as MantineDrawerCloseButtonProps)}
+    />
+  );
+});
+PanelCloseButton.displayName = "PanelCloseButton";
+
+export type PanelBodyProps = RecursicaOverStyled<MantineDrawerBodyProps>;
+
+export const PanelBody = forwardRef<HTMLDivElement, PanelBodyProps>(
+  function PanelBody({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineDrawer.Body
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineDrawerBodyProps)}
+      />
+    );
+  },
+);
+PanelBody.displayName = "PanelBody";
+
 // ============================================================
 // DOT NOTATION EXPORT
 // ============================================================
 
 type PanelComponent = typeof PanelBase & {
-  Root: typeof MantineDrawer.Root;
-  Overlay: typeof MantineDrawer.Overlay;
-  Content: typeof MantineDrawer.Content;
-  Header: typeof MantineDrawer.Header;
-  Title: typeof MantineDrawer.Title;
-  CloseButton: typeof MantineDrawer.CloseButton;
-  Body: typeof MantineDrawer.Body;
+  Root: typeof PanelRoot;
+  Overlay: typeof PanelOverlay;
+  Content: typeof PanelContent;
+  Header: typeof PanelHeader;
+  Title: typeof PanelTitle;
+  CloseButton: typeof PanelCloseButton;
+  Body: typeof PanelBody;
   Stack: typeof MantineDrawer.Stack;
   Footer: typeof PanelFooter;
 };
 
 export const Panel = PanelBase as PanelComponent;
-Panel.Root = MantineDrawer.Root;
-Panel.Overlay = MantineDrawer.Overlay;
-Panel.Content = MantineDrawer.Content;
-Panel.Header = MantineDrawer.Header;
-Panel.Title = MantineDrawer.Title;
-Panel.CloseButton = MantineDrawer.CloseButton;
-Panel.Body = MantineDrawer.Body;
+Panel.Root = PanelRoot;
+Panel.Overlay = PanelOverlay;
+Panel.Content = PanelContent;
+Panel.Header = PanelHeader;
+Panel.Title = PanelTitle;
+Panel.CloseButton = PanelCloseButton;
+Panel.Body = PanelBody;
+// Panel.Stack (DrawerStack) only accepts `children` — no styling props to
+// strip, so re-exporting Mantine's implementation directly is not a gap.
 Panel.Stack = MantineDrawer.Stack;
 Panel.Footer = PanelFooter;

package/src/components/Stepper/Stepper.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from "react";
 import {
   Stepper as MantineStepper,
   type StepperProps as MantineStepperProps,
+  type StepperStepProps as MantineStepperStepProps,
 } from "@mantine/core";
 import {
   filterStylingProps,
@@ -56,12 +57,29 @@ const _Stepper = forwardRef<HTMLDivElement, StepperProps>(
   },
 );
 
+export type StepperStepProps = RecursicaOverStyled<MantineStepperStepProps>;
+
+const _StepperStep = forwardRef<HTMLButtonElement, StepperStepProps>(
+  function StepperStep({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    return (
+      <MantineStepper.Step
+        ref={ref}
+        {...(sanitizedProps as unknown as MantineStepperStepProps)}
+      />
+    );
+  },
+);
+_StepperStep.displayName = "Stepper.Step";
+
 // We need to re-export the static components Step and Completed
 export const Stepper: typeof _Stepper & {
-  Step: typeof MantineStepper.Step;
+  Step: typeof _StepperStep;
   Completed: typeof MantineStepper.Completed;
 } = Object.assign(_Stepper, {
-  Step: MantineStepper.Step,
+  Step: _StepperStep,
+  // Stepper.Completed only accepts `children` — no styling props to strip,
+  // so re-exporting Mantine's implementation directly is not a gap.
   Completed: MantineStepper.Completed,
 });