@recursica/mantine-adapter 0.15.0 → 0.17.0

package/src/components/Group/Group.tsx

@@ -1,13 +1,9 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import {
   Group as MantineGroup,
   type GroupProps as MantineGroupProps,
 } from "@mantine/core";
-import {
-  filterStylingProps,
-  type RecursicaOverStyled,
-  type RecursicaSpacing,
-} from "../../utils/filterStylingProps";
+import { type RecursicaSpacing } from "../../utils/filterStylingProps";
 import styles from "./Group.module.css";
 
 export interface RecursicaGroupProps {
@@ -21,24 +17,23 @@ export interface RecursicaGroupProps {
 }
 
 /**
- * Group flex layout wrapper
+ * Group flex layout wrapper.
+ *
+ * Note: Unlike complex UI components, primitive layout components (Flex, Stack, Group, Container)
+ * DO NOT use the `RecursicaOverStyled` gatekeeper. Developers must be able to freely pass
+ * width, height, padding, margins, and flexbox alignment props to construct structural layouts.
  */
-export type GroupProps = RecursicaOverStyled<
-  MantineGroupProps & RecursicaGroupProps
->;
+export type GroupProps = MantineGroupProps & RecursicaGroupProps;
 
 export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
-  { children, overStyled = false, gap = "rec-default", ...rest },
+  { children, gap = "rec-default", ...rest },
   ref,
 ) {
-  const sanitizedProps = filterStylingProps({ ...rest, gap }, overStyled);
-  const restRecord = sanitizedProps as Record<string, unknown>;
-
   const mergedClassNames: Partial<Record<string, string>> = {
     root: styles.root,
   };
 
-  const classNamesProp = restRecord.classNames;
+  const classNamesProp = rest.classNames;
   if (
     classNamesProp &&
     typeof classNamesProp === "object" &&
@@ -48,7 +43,7 @@ export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
     mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
   }
 
-  const classNameProp = restRecord.className as string | undefined;
+  const classNameProp = rest.className as string | undefined;
   const finalClass = classNameProp
     ? `${styles.root} ${classNameProp}`
     : styles.root;
@@ -58,7 +53,8 @@ export const Group = forwardRef<HTMLDivElement, GroupProps>(function Group(
       ref={ref}
       className={finalClass}
       classNames={mergedClassNames}
-      {...sanitizedProps}
+      gap={gap}
+      {...rest}
     >
       {children}
     </MantineGroup>

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

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