@recursica/mantine-adapter 0.15.0 → 0.16.0

package/dist/src/components/Button/Button.d.ts

@@ -11,9 +11,15 @@ export type ButtonProps = RecursicaOverStyled<Omit<MantineButtonProps, "variant"
  * Recursica Button component wrapping Mantine's Button.
  *
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
+ * This is particularly useful when you need a button that behaves as a hyperlink (rendering an `<a>` tag)
+ * or integrates with a routing library (e.g., `react-router-dom` or Next.js), while preserving full visual styling.
+ *
  * @example
  * ```tsx
- * <Button component="a" href="/dashboard">Navigate</Button>
+ * // Renders as an <a> tag natively
+ * <Button component="a" href="/dashboard" target="_blank">Navigate</Button>
+ *
+ * // Renders using a custom router link
  * <Button renderRoot={(props) => <Link to="/home" {...props} />}>Home</Button>
  * ```
  */

package/dist/src/components/Link/Link.d.ts

@@ -1,3 +1,33 @@
 import { default as React } from 'react';
-export type LinkProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Link: React.FC<LinkProps>;
+import { AnchorProps as MantineAnchorProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+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 type LinkProps = RecursicaOverStyled<Omit<MantineAnchorProps, "underline"> & RecursicaLinkProps>;
+/**
+ * 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 declare const Link: (<C = "a">(props: import('@mantine/core').PolymorphicComponentProps<C, LinkProps>) => React.ReactElement) & Omit<React.FunctionComponent<((LinkProps & {
+    component?: any;
+}) & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "top" | "left" | "bottom" | "right" | "color" | "children" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "variant" | "attributes" | "overStyled" | "icon" | "inherit" | "inline" | "size" | "gradient" | "component" | "__staticSelector" | "lineClamp" | "truncate"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (LinkProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;

package/dist/src/components/Link/index.d.ts

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

package/dist/src/components/Pagination/Pagination.d.ts

@@ -1,3 +1,51 @@
 import { default as React } from 'react';
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Pagination: React.FC<PaginationProps>;
+import { Pagination as MantinePagination, PaginationProps as MantinePaginationProps, PaginationRootProps as MantinePaginationRootProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+import { PaginationIcon } from './Pagination.icons';
+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;
+};
+declare const _PaginationRoot: React.ForwardRefExoticComponent<PaginationRootProps & React.RefAttributes<HTMLDivElement>>;
+declare const _PaginationNext: React.ForwardRefExoticComponent<{
+    /** If set to true, displays text labels alongside the icon. */
+    withLabel?: boolean;
+    icon?: any;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const _PaginationPrevious: React.ForwardRefExoticComponent<{
+    /** If set to true, displays text labels alongside the icon. */
+    withLabel?: boolean;
+    icon?: any;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const _PaginationFirst: React.ForwardRefExoticComponent<{
+    /** If set to true, displays text labels alongside the icon. */
+    withLabel?: boolean;
+    icon?: any;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const _PaginationLast: React.ForwardRefExoticComponent<{
+    /** If set to true, displays text labels alongside the icon. */
+    withLabel?: boolean;
+    icon?: any;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const _Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Recursica Pagination component wrapping Mantine's Pagination.
+ */
+export declare const Pagination: 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;
+};
+export {};

package/dist/src/components/Pagination/Pagination.icons.d.ts

@@ -0,0 +1,8 @@
+export type PaginationIconType = "next" | "prev" | "first" | "last";
+export declare const PaginationIcon: ({ type, className, ...props }: React.ComponentProps<"svg"> & {
+    type: PaginationIconType;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NextWithLabel: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const PrevWithLabel: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const FirstWithLabel: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const LastWithLabel: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Pagination/index.d.ts

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

package/package.json

@@ -11,7 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica.git"
   },
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/components/Button/Button.stories.tsx

@@ -101,3 +101,14 @@ export const DisabledSolid: Story = {
     disabled: true,
   },
 };
+
+export const PolymorphicAsLink: Story = {
+  args: {
+    children: "Button as Link",
+    variant: "solid",
+    size: "default",
+    component: "a",
+    href: "https://example.com",
+    target: "_blank",
+  },
+};

package/src/components/Button/Button.tsx

@@ -123,9 +123,15 @@ _Button.displayName = "Button";
  * Recursica Button component wrapping Mantine's Button.
  *
  * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering.
+ * This is particularly useful when you need a button that behaves as a hyperlink (rendering an `<a>` tag)
+ * or integrates with a routing library (e.g., `react-router-dom` or Next.js), while preserving full visual styling.
+ *
  * @example
  * ```tsx
- * <Button component="a" href="/dashboard">Navigate</Button>
+ * // Renders as an <a> tag natively
+ * <Button component="a" href="/dashboard" target="_blank">Navigate</Button>
+ *
+ * // Renders using a custom router link
  * <Button renderRoot={(props) => <Link to="/home" {...props} />}>Home</Button>
  * ```
  */

package/src/components/Link/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,26 @@
+# Link Component Implementation Notes
+
+## Missing States in Design Tokens
+
+Currently, the design tokens (`recursica_variables_scoped.css`) only provide states for:
+
+- `default`
+- `hover`
+- `visited`
+- `visited-hover`
+
+There are no tokens for the `active` or `focus` states. If these are needed, they must be added to the Figma variables and exported via the token pipeline. The component relies on the browser's default focus outline for accessibility unless overriden by a global reset.
+
+## Overriding Mantine's underline Prop
+
+Mantine's `Anchor` component uses `underline="hover"` by default. Because our design system specifies exact `text-decoration` styles via CSS tokens, we explicitly pass `underline="never"` to the underlying Mantine component. This prevents Mantine from injecting its own text-decoration inline or via generic classnames, ensuring our scoped CSS remains the single source of truth.
+
+## Base Layout
+
+Mantine's `Anchor` renders an inline element by default and does not natively support `leftSection` like the `Button` component. To support an optional `icon` alongside the text, we enforce a baseline layout of `display: inline-flex` and `align-items: center` in `Link.module.css`.
+
+When an icon is present, the component conditionally passes a `data-has-icon` attribute to the root element. The CSS module uses this attribute to apply the `icon-text-gap` token via the CSS `gap` property.
+
+## Inner Wrappers
+
+The icon and children are wrapped in internal `<span>` tags (`.iconWrapper` and `.labelText` respectively). This follows the component development guide for structural robustness, allowing us to enforce specific sizing on the icon and intrinsic text truncation behavior if the link is placed in a bounded container.

package/src/components/Link/Link.module.css

@@ -0,0 +1,133 @@
+/* 
+HARDCODED VALUES:
+- display: inline-flex; (Base layout to align icon and text correctly)
+- align-items: center;
+- cursor: pointer;
+- text-decoration: none; (Overridden by our design tokens instead of using Mantine's underline prop)
+- color: inherit; (Reset before applying token)
+*/
+
+.root {
+  /* HARDCODE: base layout to support optional icon gaps */
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  /* HARDCODE: Reset underline and color so we can explicitly use our tokens */
+  text-decoration: none;
+  color: inherit;
+
+  /* Typography Default Tokens */
+  font-family: var(
+    --recursica_ui-kit_components_link_properties_text_font-family
+  );
+  font-size: var(--recursica_ui-kit_components_link_properties_text_font-size);
+  letter-spacing: var(
+    --recursica_ui-kit_components_link_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_link_properties_text_line-height
+  );
+
+  /* Default State Tokens */
+  font-style: var(
+    --recursica_ui-kit_components_link_variants_states_default_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_link_variants_states_default_properties_text_font-weight
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_link_variants_states_default_properties_text_text-decoration
+  );
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_default_properties_colors_text
+  );
+}
+
+.root[data-has-icon] {
+  gap: var(--recursica_ui-kit_components_link_properties_icon-text-gap);
+}
+
+.root:hover {
+  /* Reset Mantine's potential hover override */
+  text-decoration: var(
+    --recursica_ui-kit_components_link_variants_states_hover_properties_text_text-decoration
+  );
+  font-style: var(
+    --recursica_ui-kit_components_link_variants_states_hover_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_link_variants_states_hover_properties_text_font-weight
+  );
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_hover_properties_colors_text
+  );
+}
+
+.root:visited {
+  text-decoration: var(
+    --recursica_ui-kit_components_link_variants_states_visited_properties_text_text-decoration
+  );
+  font-style: var(
+    --recursica_ui-kit_components_link_variants_states_visited_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_link_variants_states_visited_properties_text_font-weight
+  );
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_visited_properties_colors_text
+  );
+}
+
+.root:visited:hover {
+  text-decoration: var(
+    --recursica_ui-kit_components_link_variants_states_visited-hover_properties_text_text-decoration
+  );
+  font-style: var(
+    --recursica_ui-kit_components_link_variants_states_visited-hover_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_link_variants_states_visited-hover_properties_text_font-weight
+  );
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_visited-hover_properties_colors_text
+  );
+}
+
+/* Icon Support */
+.iconWrapper {
+  /* HARDCODE: maintain intrinsic icon bounds */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: var(--recursica_ui-kit_components_link_properties_icon-size);
+  height: var(--recursica_ui-kit_components_link_properties_icon-size);
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_default_properties_colors_icon
+  );
+}
+
+.root:hover .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_hover_properties_colors_icon
+  );
+}
+
+.root:visited .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_visited_properties_colors_icon
+  );
+}
+
+.root:visited:hover .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_visited-hover_properties_colors_icon
+  );
+}
+
+/* Label text wrapper */
+.labelText {
+  /* HARDCODE: allows text truncation if bounded */
+  min-width: 0;
+}

package/src/components/Link/Link.stories.tsx

@@ -1,17 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import type { Meta, StoryObj } from "@storybook/react";
 import { Link } from "./Link";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Text } from "@mantine/core";
 
 const meta: Meta<typeof Link> = {
-  title: "UI-Kit/🚧 Link",
+  title: "UI-Kit/Link",
   component: Link,
   tags: ["autodocs"],
+  args: {
+    children: "Link text",
+    href: "#",
+  },
+  render: ({ withLayer, layer, ...args }: any) => <Link {...args} />,
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Link>;
 
-export const Default: Story = {
-  render: () => <ComingSoon componentName="Link" />,
+export const Default: Story = {};
+
+export const WithIcon: Story = {
+  args: {
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+      </svg>
+    ),
+    children: "Link with Icon",
+  },
+};
+
+export const Polymorphic: Story = {
+  args: {
+    component: "button",
+    onClick: () => alert("Button clicked!"),
+    children: "Rendered as <button>",
+  },
+};
+
+export const InlineText: Story = {
+  render: () => (
+    <Text>
+      Here is some text with an <Link href="#">inline link</Link> inside it.
+    </Text>
+  ),
 };

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>
+);