@multiplatform.one/frappe-ui 7.37.0 → 7.38.0

package/dist/jsx/record/RecordPager.mjs

@@ -1,6 +1,5 @@
-import { Avatar, Text, XStack, YStack } from "@multiplatform.one/components";
-import { Button } from "@multiplatform.one/forms";
-import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Avatar, Text, XStack, YStack, isWeb, useTheme } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ArrowLeftIcon, ArrowRightIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,61 +11,73 @@ function PagerButton({
   const {
     t
   } = useTranslation();
+  const theme = useTheme();
   const {
-    knobProps: nested
+    knobProps,
+    control
   } = useResolvedKnobs();
   const isPrev = direction === "prev";
+  const label = isPrev ? t("Previous") : t("Next");
+  const Arrow = isPrev ? ArrowLeftIcon : ArrowRightIcon;
   const avatar = /* @__PURE__ */jsx(Avatar, {
     src: entry.image,
     name: entry.title,
     backgroundColor: "$color4",
     fallbackBackgroundColor: "$color4"
   });
-  return /* @__PURE__ */jsx(Button, {
-    outlined: true,
-    minHeight: sizeRecipeEscape(56, "pager button: room for the neighbor's two-line label beside its avatar"),
-    flexShrink: 1,
+  return /* @__PURE__ */jsxs(YStack, {
+    ...(isWeb ? {
+      render: /* @__PURE__ */jsx("button", {
+        type: "button"
+      })
+    } : {}),
+    role: "button",
+    tabIndex: 0,
+    "aria-label": [label, entry.code, entry.title].filter(Boolean).join(" "),
+    ...knobProps.inputSurface,
+    ...knobProps.containerRadius,
+    ...knobProps.panelPadding,
+    ...knobProps.gapSm,
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    hoverStyle: control.hoverKnobProps,
+    pressStyle: control.pressKnobProps,
+    focusVisibleStyle: control.focusVisibleKnobProps,
+    flexGrow: 1,
+    flexBasis: 0,
     minWidth: 0,
+    cursor: "pointer",
     onPress: entry.onPress,
-    icon: isPrev ? /* @__PURE__ */jsx(ArrowLeftIcon, {
-      size: 18
-    }) : void 0,
-    iconAfter: isPrev ? void 0 : /* @__PURE__ */jsx(ArrowRightIcon, {
-      size: 18
-    }),
     testID,
-    children: /* @__PURE__ */jsxs(XStack, {
-      gap: "$2",
+    children: [/* @__PURE__ */jsxs(XStack, {
+      ...knobProps.gapSm,
       alignItems: "center",
-      flexShrink: 1,
-      minWidth: 0,
-      children: [isPrev ? avatar : null, /* @__PURE__ */jsxs(YStack, {
-        alignItems: isPrev ? "flex-start" : "flex-end",
+      flexDirection: isPrev ? "row" : "row-reverse",
+      children: [/* @__PURE__ */jsx(Arrow, {
+        size: knobProps.controlIcon.width,
+        color: theme.color11?.val
+      }), /* @__PURE__ */jsx(Text, {
+        ...knobProps.label,
+        color: "$color11",
+        numberOfLines: 1,
         flexShrink: 1,
-        minWidth: 0,
-        children: [/* @__PURE__ */jsx(Text, {
-          ...nested.label,
-          color: "$color10",
-          textTransform: "uppercase",
-          letterSpacing: 1,
-          children: isPrev ? t("Previous") : t("Next")
-        }), /* @__PURE__ */jsxs(XStack, {
-          gap: "$1.5",
-          alignItems: "baseline",
-          minWidth: 0,
-          children: [entry.code ? /* @__PURE__ */jsx(Text, {
-            ...nested.label,
-            color: "$color10",
-            children: entry.code
-          }) : null, /* @__PURE__ */jsx(Text, {
-            fontWeight: "700",
-            numberOfLines: 1,
-            flexShrink: 1,
-            children: entry.title
-          })]
-        })]
-      }), isPrev ? null : avatar]
-    })
+        children: label
+      })]
+    }), /* @__PURE__ */jsxs(XStack, {
+      ...knobProps.gapSm,
+      alignItems: "center",
+      flexWrap: "wrap",
+      children: [avatar, entry.code ? /* @__PURE__ */jsx(Text, {
+        ...knobProps.label,
+        color: "$color11",
+        children: entry.code
+      }) : null]
+    }), /* @__PURE__ */jsx(Text, {
+      ...knobProps.body,
+      fontWeight: "700",
+      textAlign: "left",
+      children: entry.title
+    })]
   });
 }
 function RecordPager({
@@ -79,18 +90,26 @@ function RecordPager({
   } = useResolvedKnobs();
   if (!prev && !next) return null;
   return /* @__PURE__ */jsxs(XStack, {
-    justifyContent: "space-between",
     ...knobProps.gap,
     marginTop: "$2",
+    alignItems: "stretch",
     children: [prev ? /* @__PURE__ */jsx(PagerButton, {
       direction: "prev",
       entry: prev,
       testID: testID && `${testID}-prev`
-    }) : /* @__PURE__ */jsx(YStack, {}), next ? /* @__PURE__ */jsx(PagerButton, {
+    }) : /* @__PURE__ */jsx(YStack, {
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0
+    }), next ? /* @__PURE__ */jsx(PagerButton, {
       direction: "next",
       entry: next,
       testID: testID && `${testID}-next`
-    }) : /* @__PURE__ */jsx(YStack, {})]
+    }) : /* @__PURE__ */jsx(YStack, {
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0
+    })]
   });
 }
 export { RecordPager };

package/dist/jsx/record/RecordPager.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Avatar","Text","XStack","YStack","Button","sizeRecipeEscape","useResolvedKnobs","ArrowLeftIcon","ArrowRightIcon","useTranslation","jsx","jsxs","PagerButton","direction","entry","testID","t","knobProps","nested","isPrev","avatar","src","image","name","title","backgroundColor","fallbackBackgroundColor","outlined","minHeight","flexShrink","minWidth","onPress","icon","size","iconAfter","children","gap","alignItems","label","color","textTransform","letterSpacing","code","fontWeight","numberOfLines","RecordPager","prev","next","justifyContent","marginTop"],"sources":["../../../src/record/RecordPager.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Avatar","Text","XStack","YStack","isWeb","useTheme","useResolvedKnobs","ArrowLeftIcon","ArrowRightIcon","useTranslation","jsx","jsxs","PagerButton","direction","entry","testID","t","theme","knobProps","control","isPrev","label","Arrow","avatar","src","image","name","title","backgroundColor","fallbackBackgroundColor","render","type","role","tabIndex","code","filter","Boolean","join","inputSurface","containerRadius","panelPadding","gapSm","borderColor","hoverStyle","hoverKnobProps","pressStyle","pressKnobProps","focusVisibleStyle","focusVisibleKnobProps","flexGrow","flexBasis","minWidth","cursor","onPress","children","alignItems","flexDirection","size","controlIcon","width","color","color11","val","numberOfLines","flexShrink","flexWrap","body","fontWeight","textAlign","RecordPager","prev","next","gap","marginTop"],"sources":["../../../src/record/RecordPager.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/record/RecordPager.native.js

@@ -29,7 +29,6 @@ __export(RecordPager_exports, {
 module.exports = __toCommonJS(RecordPager_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@multiplatform.one/components");
-var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react_i18next = require("react-i18next");
@@ -39,64 +38,77 @@ function PagerButton(param) {
     entry,
     testID
   } = param;
+  var _theme_color11;
   var {
     t
   } = (0, import_react_i18next.useTranslation)();
+  var theme = (0, import_components.useTheme)();
   var {
-    knobProps: nested
+    knobProps,
+    control
   } = (0, import_theme.useResolvedKnobs)();
   var isPrev = direction === "prev";
+  var label = isPrev ? t("Previous") : t("Next");
+  var Arrow = isPrev ? import_react.ArrowLeftIcon : import_react.ArrowRightIcon;
   var avatar = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
     src: entry.image,
     name: entry.title,
     backgroundColor: "$color4",
     fallbackBackgroundColor: "$color4"
   });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-    outlined: true,
-    minHeight: (0, import_theme.sizeRecipeEscape)(56, "pager button: room for the neighbor's two-line label beside its avatar"),
-    flexShrink: 1,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...(import_components.isWeb ? {
+      render: /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button"
+      })
+    } : {}),
+    role: "button",
+    tabIndex: 0,
+    "aria-label": [label, entry.code, entry.title].filter(Boolean).join(" "),
+    ...knobProps.inputSurface,
+    ...knobProps.containerRadius,
+    ...knobProps.panelPadding,
+    ...knobProps.gapSm,
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    hoverStyle: control.hoverKnobProps,
+    pressStyle: control.pressKnobProps,
+    focusVisibleStyle: control.focusVisibleKnobProps,
+    flexGrow: 1,
+    flexBasis: 0,
     minWidth: 0,
+    cursor: "pointer",
     onPress: entry.onPress,
-    icon: isPrev ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowLeftIcon, {
-      size: 18
-    }) : void 0,
-    iconAfter: isPrev ? void 0 : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowRightIcon, {
-      size: 18
-    }),
     testID,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-      gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gapSm,
       alignItems: "center",
-      flexShrink: 1,
-      minWidth: 0,
-      children: [isPrev ? avatar : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-        alignItems: isPrev ? "flex-start" : "flex-end",
+      flexDirection: isPrev ? "row" : "row-reverse",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Arrow, {
+        size: knobProps.controlIcon.width,
+        color: (_theme_color11 = theme.color11) === null || _theme_color11 === void 0 ? void 0 : _theme_color11.val
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.label,
+        color: "$color11",
+        numberOfLines: 1,
         flexShrink: 1,
-        minWidth: 0,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-          ...nested.label,
-          color: "$color10",
-          textTransform: "uppercase",
-          letterSpacing: 1,
-          children: isPrev ? t("Previous") : t("Next")
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-          gap: "$1.5",
-          alignItems: "baseline",
-          minWidth: 0,
-          children: [entry.code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            ...nested.label,
-            color: "$color10",
-            children: entry.code
-          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
-            fontWeight: "700",
-            numberOfLines: 1,
-            flexShrink: 1,
-            children: entry.title
-          })]
-        })]
-      }), isPrev ? null : avatar]
-    })
+        children: label
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gapSm,
+      alignItems: "center",
+      flexWrap: "wrap",
+      children: [avatar, entry.code ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        ...knobProps.label,
+        color: "$color11",
+        children: entry.code
+      }) : null]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.body,
+      fontWeight: "700",
+      textAlign: "left",
+      children: entry.title
+    })]
   });
 }
 function RecordPager(param) {
@@ -110,18 +122,26 @@ function RecordPager(param) {
   } = (0, import_theme.useResolvedKnobs)();
   if (!prev && !next) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-    justifyContent: "space-between",
     ...knobProps.gap,
     marginTop: "$2",
+    alignItems: "stretch",
     children: [prev ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PagerButton, {
       direction: "prev",
       entry: prev,
       testID: testID && `${testID}-prev`
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {}), next ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PagerButton, {
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0
+    }), next ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PagerButton, {
       direction: "next",
       entry: next,
       testID: testID && `${testID}-next`
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {})]
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0
+    })]
   });
 }
 //# sourceMappingURL=RecordPager.native.js.map

package/dist/jsx/record/RecordPager.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","RecordPager_exports","RecordPager","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","PagerButton","param","direction","entry","testID","t","useTranslation","knobProps","nested","useResolvedKnobs","isPrev","avatar","jsx","Avatar","src","image","title","backgroundColor","fallbackBackgroundColor","Button","outlined","minHeight","sizeRecipeEscape","flexShrink","minWidth","onPress","icon","ArrowLeftIcon","size","iconAfter","ArrowRightIcon","children","jsxs","XStack","gap","alignItems","YStack"],"sources":["../../../src/record/RecordPager.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","RecordPager_exports","RecordPager","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","import_react_i18next","PagerButton","param","direction","entry","testID","_theme_color11","t","useTranslation","theme","useTheme","knobProps","control","useResolvedKnobs","isPrev","label","Arrow","ArrowLeftIcon","ArrowRightIcon","avatar","jsx","Avatar","src","image","title","backgroundColor","fallbackBackgroundColor","jsxs","YStack","isWeb","render","type","role","tabIndex","code","filter","Boolean","join","inputSurface","containerRadius","panelPadding","gapSm","borderColor","hoverStyle","hoverKnobProps","pressStyle","pressKnobProps","focusVisibleStyle","focusVisibleKnobProps","flexGrow","flexBasis","minWidth","cursor","onPress","children","XStack","alignItems","flexDirection","size","controlIcon","width","color","color11","val"],"sources":["../../../src/record/RecordPager.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/frappe-ui",
-  "version": "7.37.0",
+  "version": "7.38.0",
   "description": "Pre-wired Tamagui components for Frappe doctypes with live data",
   "keywords": [
     "cross-platform",
@@ -72,18 +72,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/components": "^7.37.0",
-    "@multiplatform.one/desktop": "^7.37.0",
-    "@multiplatform.one/forms": "^7.37.0",
-    "@multiplatform.one/frappe": "^7.37.0",
-    "@multiplatform.one/i18n": "^7.37.0",
-    "@multiplatform.one/markdown": "^7.37.0",
-    "@multiplatform.one/platform": "^7.37.0",
-    "@multiplatform.one/rich-text": "^7.37.0",
-    "@multiplatform.one/router": "^7.37.0",
-    "@multiplatform.one/store": "^7.37.0",
-    "@multiplatform.one/table": "^7.37.0",
-    "@multiplatform.one/theme": "^7.37.0",
+    "@multiplatform.one/components": "^7.38.0",
+    "@multiplatform.one/desktop": "^7.38.0",
+    "@multiplatform.one/forms": "^7.38.0",
+    "@multiplatform.one/frappe": "^7.38.0",
+    "@multiplatform.one/i18n": "^7.38.0",
+    "@multiplatform.one/markdown": "^7.38.0",
+    "@multiplatform.one/platform": "^7.38.0",
+    "@multiplatform.one/rich-text": "^7.38.0",
+    "@multiplatform.one/router": "^7.38.0",
+    "@multiplatform.one/store": "^7.38.0",
+    "@multiplatform.one/table": "^7.38.0",
+    "@multiplatform.one/theme": "^7.38.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/colors": "2.7.6",
     "@tanstack/db": "0.8.0",
@@ -100,9 +100,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.37.0",
-    "@multiplatform.one/storybook": "7.37.0",
-    "@multiplatform.one/test-utils": "7.37.0",
+    "@multiplatform.one/config": "7.38.0",
+    "@multiplatform.one/storybook": "7.38.0",
+    "@multiplatform.one/test-utils": "7.38.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/record/RecordBars.spec.tsx

@@ -0,0 +1,64 @@
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { TamaguiProvider } from "tamagui";
+import type { ReactElement } from "react";
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { RecordBars } from "./RecordBars";
+import type { FrappeRecordBarsSection } from "./recordSections";
+
+const config = createDefaultThemeConfig().tamagui;
+function renderWithProviders(ui: ReactElement) {
+  return render(
+    <TamaguiProvider config={config} defaultTheme="light">
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
+const stats = [
+  { stat: "HP", value: 45 },
+  { stat: "Attack", value: 30 },
+  { stat: "Defense", value: 35 },
+  { stat: "Sp. Atk", value: 20 },
+  { stat: "Sp. Def", value: 20 },
+  { stat: "Speed", value: 45 },
+];
+const section: FrappeRecordBarsSection = {
+  kind: "bars",
+  id: "stats",
+  table: "stats",
+  label: "stat",
+  value: "value",
+  max: 255,
+  title: "Stats",
+};
+
+afterEach(cleanup);
+
+describe("RecordBars", () => {
+  it.each([undefined, "lime", "missing-hue"])("paints every stat with tint %s", (tint) => {
+    const { container, getByRole } = renderWithProviders(
+      <RecordBars rows={stats} section={section} tint={tint} />,
+    );
+    const fills = container.querySelectorAll<HTMLElement>("[data-record-bar-fill]");
+    stats.forEach(({ stat, value }, index) => {
+      expect(getByRole("meter", { name: stat }).getAttribute("aria-valuenow")).toBe(String(value));
+      expect(getComputedStyle(fills[index]).width).toBe(`${(value / 255) * 100}%`);
+      const paintClass = (element: HTMLElement) =>
+        Array.from(element.classList).find((name) => name.startsWith("_bg-"));
+      expect(paintClass(fills[index])).toBeTruthy();
+      expect(paintClass(fills[index])).toBe(paintClass(fills[1]));
+    });
+  });
+  it("keeps a supported hue on the maximum bars", () => {
+    const { container } = renderWithProviders(
+      <RecordBars rows={stats} section={section} tint="blue" />,
+    );
+    const fills = container.querySelectorAll<HTMLElement>("[data-record-bar-fill]");
+    const paintClass = (element: HTMLElement) =>
+      Array.from(element.classList).find((name) => name.startsWith("_bg-"));
+    expect(paintClass(fills[0])).toBeTruthy();
+    expect(paintClass(fills[0])).not.toBe(paintClass(fills[1]));
+    expect(paintClass(fills[5])).toBe(paintClass(fills[0]));
+  });
+});

package/src/record/RecordBars.tsx

@@ -1,4 +1,11 @@
-import { Separator, Text, XStack, YStack } from "@multiplatform.one/components";
+import {
+  Separator,
+  Text,
+  XStack,
+  YStack,
+  getTokens,
+  useTheme,
+} from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { childBars } from "./recordData";
@@ -27,6 +34,9 @@ export function RecordBars({
   testID?: string;
 }) {
   const { t } = useTranslation();
+  const theme = useTheme();
+  const tintToken = `$${tint}9`;
+  const hasTint = tint && (theme[`${tint}9`]?.val || getTokens().color?.[tintToken]);
   const { knobProps } = useResolvedKnobs();
   const { knobProps: nested } = useResolvedKnobs();
   const { bars, total } = childBars(rows, section);
@@ -52,7 +62,7 @@ export function RecordBars({
       <YStack role="list" {...knobProps.gap}>
         {bars.map((bar) => {
           const percent = Math.max(0, Math.min(100, (bar.value / section.max) * 100));
-          const fill = tint && bar.value === top ? `$${tint}9` : "$color9";
+          const fill = hasTint && bar.value === top ? tintToken : "$color9";
           return (
             <XStack
               key={bar.key}

package/src/record/RecordPager.spec.tsx

@@ -0,0 +1,37 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { RecordPager } from "./RecordPager";
+
+afterEach(cleanup);
+
+describe("RecordPager", () => {
+  it("uses growing, equal-width cards and preserves full record names", () => {
+    const previous = vi.fn();
+    const next = vi.fn();
+    const { getByRole, getByText } = renderWithProviders(
+      <RecordPager
+        prev={{ title: "Blastoise", code: "#009", onPress: previous }}
+        next={{ title: "Metapod", code: "#011", onPress: next }}
+      />,
+    );
+    const cards = [
+      getByRole("button", { name: "Previous #009 Blastoise" }),
+      getByRole("button", { name: "Next #011 Metapod" }),
+    ];
+    for (const card of cards) {
+      expect(card.tagName).toBe("BUTTON");
+      const style = getComputedStyle(card);
+      expect(style.height).not.toMatch(/\d/);
+      expect(style.flexBasis).toMatch(/^0(px|%)?$/);
+      expect(style.flexGrow).toBe("1");
+    }
+    for (const title of ["Blastoise", "Metapod"]) {
+      expect(getComputedStyle(getByText(title)).whiteSpace).not.toBe("nowrap");
+    }
+    fireEvent.click(cards[0]);
+    fireEvent.click(cards[1]);
+    expect(previous).toHaveBeenCalledOnce();
+    expect(next).toHaveBeenCalledOnce();
+  });
+});