@recursica/mantine-adapter 0.14.0 → 0.16.0

package/src/components/Link/Link.tsx

@@ -1,7 +1,84 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import {
+  Anchor as MantineAnchor,
+  type AnchorProps as MantineAnchorProps,
+  createPolymorphicComponent,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Link.module.css";
 
-export type LinkProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaLinkProps {
+  /**
+   * Optional leading icon to display next to the link text.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The text or elements to display inside the link.
+   */
+  children?: React.ReactNode;
+}
 
-export const Link: React.FC<LinkProps> = (props) => {
-  return <div {...props}>Link</div>;
-};
+export type LinkProps = RecursicaOverStyled<
+  Omit<MantineAnchorProps, "underline"> & RecursicaLinkProps
+>;
+
+const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  { icon, children, overStyled = false, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+  };
+
+  const classNamesProp = restRecord.classNames;
+  if (
+    classNamesProp &&
+    typeof classNamesProp === "object" &&
+    !Array.isArray(classNamesProp)
+  ) {
+    const o = classNamesProp as Partial<Record<string, string>>;
+    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <MantineAnchor
+      ref={ref}
+      className={finalClass}
+      classNames={mergedClassNames}
+      underline="never"
+      {...(icon ? { "data-has-icon": "" } : {})}
+      {...sanitizedProps}
+    >
+      {icon && (
+        <span className={styles.iconWrapper} aria-hidden>
+          {icon}
+        </span>
+      )}
+      <span className={styles.labelText}>{children}</span>
+    </MantineAnchor>
+  );
+});
+_Link.displayName = "Link";
+
+/**
+ * Recursica Link component wrapping Mantine's Anchor.
+ *
+ * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering (e.g. react-router Link).
+ * @example
+ * ```tsx
+ * <Link component="a" href="https://example.com">External Link</Link>
+ * <Link renderRoot={(props) => <RouterLink to="/home" {...props} />}>Home</Link>
+ * ```
+ */
+export const Link = createPolymorphicComponent<"a", LinkProps>(_Link);

package/src/components/Link/index.ts

@@ -0,0 +1 @@
+export * from "./Link";

package/src/components/Pagination/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,16 @@
+# Pagination Implementation Notes
+
+## Architecture Decision: CSS Inheritance vs. Composition
+
+The Figma design tokens for the `Pagination` component dictate that pagination pages perfectly mimic `Button` variants (e.g. `active-pages_style: "solid"`, `inactive-pages_style: "outline"`, `navigation-controls_style: "text"`).
+
+As of the `1.2.0` scoped CSS update, the Figma exporter automatically handles these variants. It flattens and aliases the referenced Button properties directly into the `Pagination` component's variable namespace.
+
+We opted to use Mantine's native `PaginationControl` components to ensure all DOM structure, focus management, and accessibility attributes are preserved natively without us needing to carefully rebuild `Pagination.Items` mappings.
+
+To honor the Figma design intents while using Mantine's raw `<button>` elements:
+
+1. We inherit and map all natively scoped `Pagination` variant styles (small typography, outline/solid/text colors, and hover overlays) directly into `.control` and `.control[data-active]` within `Pagination.module.css`. We do not need to manually reference `Button` variables cross-component.
+2. We inject `data-variant="text"` via `getControlProps` onto the navigation buttons so that they inherit the explicitly aliased text style variables (`navigation-controls`) defined by the UI Kit for pagination.
+
+This achieves exact optical alignment with the tokens while maintaining Mantine's robust internal event handling for pagination.

package/src/components/Pagination/Pagination.icons.tsx

@@ -0,0 +1,66 @@
+import styles from "./Pagination.module.css";
+
+const NextPath =
+  "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z";
+const PrevPath =
+  "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z";
+const FirstPath =
+  "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z";
+const LastPath =
+  "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z";
+
+export type PaginationIconType = "next" | "prev" | "first" | "last";
+
+const paths: Record<PaginationIconType, string> = {
+  next: NextPath,
+  prev: PrevPath,
+  first: FirstPath,
+  last: LastPath,
+};
+
+export const PaginationIcon = ({
+  type,
+  className,
+  ...props
+}: React.ComponentProps<"svg"> & { type: PaginationIconType }) => (
+  <svg
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    className={`${styles.baseIcon} ${className || ""}`.trim()}
+    {...props}
+  >
+    <path d={paths[type as PaginationIconType]} fill="currentColor" />
+  </svg>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const NextWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <span>Next</span>
+    <PaginationIcon type="next" {...props} />
+  </div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const PrevWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <PaginationIcon type="prev" {...props} />
+    <span>Prev</span>
+  </div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const FirstWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <PaginationIcon type="first" {...props} />
+    <span>First</span>
+  </div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const LastWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <span>Last</span>
+    <PaginationIcon type="last" {...props} />
+  </div>
+);

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

@@ -0,0 +1,225 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--recursica_ui-kit_components_pagination_properties_item-gap);
+}
+
+.control {
+  box-sizing: border-box;
+  margin: 0;
+  border-style: solid;
+  position: relative;
+  transition: all 0.2s ease;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Typography */
+  font-family: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-family,
+    var(--recursica_brand_fonts_primary)
+  );
+  font-size: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-size,
+    var(--recursica_brand_dimensions_text-size_default)
+  );
+  font-style: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-style,
+    normal
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_font-weight,
+    500
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_letter-spacing,
+    0
+  );
+  line-height: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_line-height,
+    1.5
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_text-decoration,
+    none
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_text_text-transform,
+    none
+  );
+
+  /* Dimensions */
+  border-radius: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_border-radius
+  );
+  height: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_height
+  );
+  min-width: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_horizontal-padding
+    );
+
+  /* Base Inactive Style: Outline */
+  border-width: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_text
+  );
+}
+
+.control:disabled {
+  opacity: var(--recursica_brand_states_disabled);
+  cursor: not-allowed;
+}
+
+.control:hover:not(:disabled) {
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_style_properties_colors_text-hover
+  );
+}
+
+/* Hover Overlay */
+.control::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+  opacity: 0;
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_hover-color
+  );
+}
+
+.control:hover:not(:disabled)::after {
+  opacity: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_hover-opacity,
+    0.1
+  );
+}
+
+/* Active Style: Solid */
+.control[data-active] {
+  border-width: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_text
+  );
+}
+
+.control[data-active]:hover:not(:disabled) {
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_active-pages_style_properties_colors_text-hover
+  );
+}
+
+/* Navigation Style: Text */
+.control[data-variant="text"] {
+  border-width: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_text
+  );
+
+  /* Also explicitly inherit navigation sizes incase they differ from pages */
+  border-radius: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_border-radius
+  );
+  height: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_height
+  );
+  min-width: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_min-width
+  );
+  padding: 0
+    var(
+      --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_horizontal-padding
+    );
+}
+
+.control[data-variant="text"]:hover:not(:disabled) {
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_style_properties_colors_text-hover
+  );
+}
+
+/* Hover Overlay for Navigation */
+.control[data-variant="text"]::after {
+  background-color: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_hover-color
+  );
+}
+.control[data-variant="text"]:hover:not(:disabled)::after {
+  opacity: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_hover-opacity,
+    0.1
+  );
+}
+
+/* Dots */
+.dots {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_height
+  );
+  min-width: var(
+    --recursica_ui-kit_components_pagination_properties_inactive-pages_size_properties_min-width
+  );
+  color: var(
+    --recursica_ui-kit_components_pagination_properties_colors_dots-color
+  );
+}
+
+/* Icon Styles */
+.iconWithLabel {
+  display: flex;
+  align-items: center;
+  gap: var(
+    --recursica_ui-kit_components_pagination_properties_navigation-controls_size_properties_icon-text-gap,
+    4px
+  );
+}
+
+.baseIcon {
+  width: calc(var(--pagination-control-size) / 1.8);
+  height: calc(var(--pagination-control-size) / 1.8);
+}

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

@@ -1,17 +1,57 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Pagination } from "./Pagination";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof Pagination> = {
-  title: "UI-Kit/🚧 Pagination",
+  title: "UI-Kit/Pagination",
   component: Pagination,
   tags: ["autodocs"],
+  argTypes: {
+    total: { control: "number" },
+    withEdges: { control: "boolean" },
+    withControls: { control: "boolean" },
+    disabled: { control: "boolean" },
+    withLabels: {
+      control: "boolean",
+      description: "Toggle text labels alongside icons",
+    },
+    defaultChecked: { table: { disable: true } },
+  },
+  args: {
+    total: 10,
+    withEdges: false,
+    withControls: true,
+    withLabels: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <Pagination {...args} />;
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Pagination>;
 
-export const Default: Story = {
-  render: () => <ComingSoon componentName="Pagination" />,
+export const Default: Story = {};
+
+export const WithEdges: Story = {
+  args: {
+    withEdges: true,
+  },
+};
+
+export const Compositional: Story = {
+  render: () => (
+    <Pagination.Root total={10}>
+      <Pagination.Items />
+    </Pagination.Root>
+  ),
+};
+
+export const WithTextLabels: Story = {
+  args: {
+    withEdges: true,
+    withLabels: true,
+  },
 };

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,217 @@
-import React from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import {
+  Pagination as MantinePagination,
+  type PaginationProps as MantinePaginationProps,
+  type PaginationRootProps as MantinePaginationRootProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Pagination.module.css";
+import {
+  NextWithLabel,
+  PrevWithLabel,
+  FirstWithLabel,
+  LastWithLabel,
+  PaginationIcon,
+} from "./Pagination.icons";
 
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement>;
+export type PaginationProps = RecursicaOverStyled<MantinePaginationProps> & {
+  /** If set to true, displays text labels alongside the icons for next/previous/first/last edges. */
+  withLabels?: boolean;
+};
+
+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;
+  };
+
+function usePaginationClassNames(restRecord: Record<string, unknown>): {
+  className: string;
+  classNames: Partial<Record<string, string>>;
+} {
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+    control: styles.control,
+    dots: styles.dots,
+  };
+
+  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.control = o.control
+      ? `${styles.control} ${o.control}`
+      : styles.control;
+    mergedClassNames.dots = o.dots ? `${styles.dots} ${o.dots}` : styles.dots;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return { className: finalClass, classNames: mergedClassNames };
+}
+
+const _PaginationRoot = forwardRef<HTMLDivElement, PaginationRootProps>(
+  function PaginationRoot({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const stylingParams = usePaginationClassNames(
+      sanitizedProps as Record<string, unknown>,
+    );
+
+    return (
+      <MantinePagination.Root
+        ref={ref}
+        className={stylingParams.className}
+        classNames={stylingParams.classNames}
+        {...(sanitizedProps as MantinePaginationRootProps)}
+      />
+    );
+  },
+);
+_PaginationRoot.displayName = "Pagination.Root";
 
-export const Pagination: React.FC<PaginationProps> = (props) => {
-  return <div {...props}>Pagination</div>;
+const _PaginationNext = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Next>
+>(function PaginationNext({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
+  return (
+    <MantinePagination.Next
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationNext.displayName = "Pagination.Next";
+
+const _PaginationPrevious = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Previous>
+>(function PaginationPrevious({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
+  return (
+    <MantinePagination.Previous
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationPrevious.displayName = "Pagination.Previous";
+
+const _PaginationFirst = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.First>
+>(function PaginationFirst({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
+  return (
+    <MantinePagination.First
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationFirst.displayName = "Pagination.First";
+
+const _PaginationLast = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Last>
+>(function PaginationLast({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
+  return (
+    <MantinePagination.Last
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationLast.displayName = "Pagination.Last";
+
+const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
+  function Pagination(
+    { overStyled = false, getControlProps, withLabels, ...rest },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const stylingParams = usePaginationClassNames(
+      sanitizedProps as Record<string, unknown>,
+    );
+
+    const mergedGetControlProps = (
+      control: "first" | "previous" | "last" | "next",
+    ) => {
+      const baseProps = { "data-variant": "text" };
+      if (getControlProps) {
+        return { ...baseProps, ...getControlProps(control) };
+      }
+      return baseProps;
+    };
+
+    const labelsIcons = withLabels
+      ? {
+          nextIcon: NextWithLabel,
+          previousIcon: PrevWithLabel,
+          firstIcon: FirstWithLabel,
+          lastIcon: LastWithLabel,
+        }
+      : {};
+
+    return (
+      <MantinePagination
+        ref={ref}
+        className={stylingParams.className}
+        classNames={stylingParams.classNames}
+        getControlProps={mergedGetControlProps}
+        {...labelsIcons}
+        {...(sanitizedProps as MantinePaginationProps)}
+      />
+    );
+  },
+);
+_Pagination.displayName = "Pagination";
+
+/**
+ * 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;
+  Next: typeof _PaginationNext;
+  Previous: typeof _PaginationPrevious;
+  First: typeof _PaginationFirst;
+  Last: typeof _PaginationLast;
+  Icon: typeof PaginationIcon;
 };
+
+Pagination.Root = _PaginationRoot;
+Pagination.Items = MantinePagination.Items;
+Pagination.Control = MantinePagination.Control;
+Pagination.Dots = MantinePagination.Dots;
+Pagination.Next = _PaginationNext;
+Pagination.Previous = _PaginationPrevious;
+Pagination.First = _PaginationFirst;
+Pagination.Last = _PaginationLast;
+Pagination.Icon = PaginationIcon;

package/src/components/Pagination/index.ts

@@ -0,0 +1,5 @@
+export {
+  Pagination,
+  type PaginationProps,
+  type PaginationRootProps,
+} from "./Pagination";