@nizivo/react 0.1.0 → 0.2.1

package/dist/mobile-tab-bar/mobile-tab-bar.js

@@ -0,0 +1,54 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { MobileTabBarInset } from "./mobile-tab-bar-inset.client.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/mobile-tab-bar/mobile-tab-bar.tsx
+/** The `<nav>` and its list, with the bottom-inset island. */
+function MobileTabBarRoot({ labels, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": labels?.nav ?? "Primary",
+		"data-slot": "mobile-tab-bar",
+		...rest,
+		className: cx("nz-mobile-tab-bar", className),
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "nz-mobile-tab-bar-list",
+			"data-slot": "mobile-tab-bar-list",
+			children
+		}), /* @__PURE__ */ jsx(MobileTabBarInset, {})]
+	});
+}
+/**
+* One destination: a list item around a link, with its icon in Figma's indicator pill and its label
+* under it. Props other than `icon`, `count` and `current` go to the link.
+*/
+function MobileTabBarItem({ current = false, icon, count, render, className, children, ...rest }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: "nz-mobile-tab-bar-item",
+		"data-slot": "mobile-tab-bar-item",
+		children: renderElement("a", render, { current }, {
+			"data-slot": "mobile-tab-bar-link",
+			...rest,
+			"aria-current": current ? "page" : rest["aria-current"],
+			className: cx("nz-mobile-tab-bar-link", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: "nz-mobile-tab-bar-indicator",
+				"data-slot": "mobile-tab-bar-indicator",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nz-mobile-tab-bar-icon",
+					"aria-hidden": "true",
+					children: icon
+				}), count != null && /* @__PURE__ */ jsx("span", {
+					className: "nz-mobile-tab-bar-count",
+					"data-slot": "mobile-tab-bar-count",
+					children: count
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "nz-mobile-tab-bar-label",
+				"data-slot": "mobile-tab-bar-label",
+				children
+			})] })
+		})
+	});
+}
+//#endregion
+export { MobileTabBarItem, MobileTabBarRoot };

package/dist/mobile-tab-bar/mobile-tab-bar.parts.d.ts

@@ -0,0 +1,6 @@
+import { MobileTabBarItem, MobileTabBarRoot } from "./mobile-tab-bar.js";
+declare namespace mobile_tab_bar_parts_d_exports {
+  export { MobileTabBarItem as Item, MobileTabBarRoot as Root };
+}
+//#endregion
+export { MobileTabBarItem as Item, MobileTabBarRoot as Root, mobile_tab_bar_parts_d_exports };

package/dist/mobile-tab-bar/mobile-tab-bar.parts.js

@@ -0,0 +1,9 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { MobileTabBarItem, MobileTabBarRoot } from "./mobile-tab-bar.js";
+//#region src/mobile-tab-bar/mobile-tab-bar.parts.ts
+var mobile_tab_bar_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => MobileTabBarItem,
+	Root: () => MobileTabBarRoot
+});
+//#endregion
+export { MobileTabBarItem as Item, MobileTabBarRoot as Root, mobile_tab_bar_parts_exports };

package/dist/mobile-top-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { MobileTopBar, MobileTopBarProps } from "./mobile-top-bar.js";
+export { MobileTopBar, type MobileTopBarProps };

package/dist/mobile-top-bar/index.js

@@ -0,0 +1 @@
+export { MobileTopBar } from "./mobile-top-bar.js";

package/dist/mobile-top-bar/mobile-top-bar.d.ts

@@ -0,0 +1,17 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/mobile-top-bar/mobile-top-bar.d.ts
+export interface MobileTopBarProps extends Omit<ComponentPropsWithRef<"header">, "title" | "children"> {
+  /** The page's name, in Heading/H4's look (Figma's Title). Not a heading element. */
+  title?: ReactNode;
+  /** The store's mark, drawn as Figma's 32 px Store mark: an initial, or a logo image that fills it. */
+  mark?: ReactNode;
+  /** In place of `mark`, for example a back link on a detail page. */
+  leading?: ReactNode;
+  /** At the end, usually a search IconButton and a notifications IconButton. */
+  actions?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+/** The bar above the page below 640 px (AppShell's `mobileTopBar`). */
+export declare function MobileTopBar({ title, mark, leading, actions, render, className, ...rest }: MobileTopBarProps): ReactElement;
+//#endregion

package/dist/mobile-top-bar/mobile-top-bar.js

@@ -0,0 +1,31 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/mobile-top-bar/mobile-top-bar.tsx
+/** The bar above the page below 640 px (AppShell's `mobileTopBar`). */
+function MobileTopBar({ title, mark, leading, actions, render, className, ...rest }) {
+	return renderElement("header", render, {}, {
+		"data-slot": "mobile-top-bar",
+		...rest,
+		className: cx("nz-mobile-top-bar", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			leading ?? (mark != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-mobile-top-bar-mark",
+				"data-slot": "mobile-top-bar-mark",
+				children: mark
+			})),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-mobile-top-bar-title",
+				"data-slot": "mobile-top-bar-title",
+				children: title
+			}),
+			actions != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-mobile-top-bar-actions",
+				"data-slot": "mobile-top-bar-actions",
+				children: actions
+			})
+		] })
+	});
+}
+//#endregion
+export { MobileTopBar };

package/dist/motion/count-up.client.d.ts

@@ -0,0 +1,39 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, RefObject } from "react";
+//#region src/motion/count-up.client.d.ts
+export interface CountUpOptions {
+  /** `Intl.NumberFormat` options, as NumberValue takes them. @default {} */
+  format?: Intl.NumberFormatOptions | undefined;
+  /** BCP 47 tag for the number. @default 'en-US' */
+  locale?: string | undefined;
+  /**
+   * Milliseconds. The default reads `--nz-duration-count-up` from the element (900 ms). Under reduced
+   * motion that token is 0 ms and the value is shown at once, whatever this says.
+   */
+  duration?: number | undefined;
+  /** Where the first count starts. Later counts start from the number on screen. @default 0 */
+  from?: number | undefined;
+}
+/** NumberValue's state: the final value and its formatted text. */
+export interface CountUpState {
+  value: number;
+  /** The final formatted text, which the server renders and assistive tech reads. */
+  text: string;
+}
+export interface CountUpProps extends CountUpOptions, Omit<ComponentPropsWithRef<"data">, "children" | "value"> {
+  value: number;
+  render?: RenderProp<CountUpState>;
+}
+/**
+ * Counts the text of `ref`'s element up to `value`, formatted with `formatNumber` (so every frame
+ * reads like the server's text). Render the final formatted value in that element yourself; the hook
+ * only writes frames and gives the element the final string's width while it counts (make it
+ * `inline-block`). Keep it `aria-hidden` and put the final value in visually hidden text beside it.
+ */
+export declare function useCountUp(ref: RefObject<HTMLElement | null>, value: number, options?: CountUpOptions): void;
+/**
+ * NumberValue's `<data>` with the final value, counted up on the client. A client leaf: under RSC it
+ * is the one dashboard part that ships JavaScript (§17.2).
+ */
+export declare function CountUp(props: CountUpProps): ReactElement;
+//#endregion

package/dist/motion/count-up.client.js

@@ -0,0 +1,109 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { formatNumber } from "../number-value/number-value.js";
+import { useEffectEvent, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/motion/count-up.client.tsx
+const noop = () => () => {};
+const decimals = (n) => (String(n).split(".")[1] ?? "").length;
+/**
+* Counts the text of `ref`'s element up to `value`, formatted with `formatNumber` (so every frame
+* reads like the server's text). Render the final formatted value in that element yourself; the hook
+* only writes frames and gives the element the final string's width while it counts (make it
+* `inline-block`). Keep it `aria-hidden` and put the final value in visually hidden text beside it.
+*/
+function useCountUp(ref, value, options = {}) {
+	const [hydrated] = useState(useSyncExternalStore(noop, () => false, () => true));
+	const read = useEffectEvent(() => options);
+	const memory = useRef({});
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (el === null) return void 0;
+		const state = memory.current;
+		const { format, locale, duration, from = 0 } = read();
+		const write = (n) => {
+			state.shown = n;
+			el.textContent = formatNumber(n, format, locale);
+		};
+		const begin = state.shown ?? from;
+		const step = 10 ** Math.max(decimals(begin), decimals(value));
+		let frame = 0;
+		const count = () => {
+			const token = getComputedStyle(el).getPropertyValue("--nz-duration-count-up");
+			const ms = Number.parseFloat(token) * (token.includes("ms") ? 1 : 1e3);
+			const total = ms === 0 ? 0 : duration ?? ms;
+			write(value);
+			if (!(total > 0) || begin === value) return;
+			el.style.inlineSize = `${Number.parseFloat(getComputedStyle(el).inlineSize) + .005}px`;
+			let start;
+			const tick = (now) => {
+				start ??= now;
+				const x = Math.min((now - start) / total, 1);
+				const s = Math.cbrt(x);
+				write(x < 1 ? Math.round((begin + (value - begin) * s * s * (3 - 2 * s)) * step) / step : value);
+				if (x < 1) frame = requestAnimationFrame(tick);
+				else el.style.inlineSize = "";
+			};
+			write(begin);
+			frame = requestAnimationFrame(tick);
+		};
+		if (state.shown === void 0) {
+			const box = el.getBoundingClientRect();
+			state.seen = box.width > 0 && box.bottom > 0 && box.top < innerHeight;
+			if (!state.seen) state.wait = count;
+			else if (hydrated) write(value);
+			else count();
+		} else if (state.seen) count();
+		else write(value);
+		const observer = new IntersectionObserver(([entry]) => {
+			state.seen = entry?.isIntersecting;
+			if (state.seen && state.wait) {
+				state.wait();
+				state.wait = void 0;
+			}
+		});
+		observer.observe(el);
+		return () => {
+			observer.disconnect();
+			cancelAnimationFrame(frame);
+			state.wait = void 0;
+			el.style.inlineSize = "";
+		};
+	}, [
+		ref,
+		hydrated,
+		value
+	]);
+}
+/**
+* NumberValue's `<data>` with the final value, counted up on the client. A client leaf: under RSC it
+* is the one dashboard part that ships JavaScript (§17.2).
+*/
+function CountUp(props) {
+	const { value, format, locale, duration: _duration, from: _from, render, className, ...rest } = props;
+	const digits = useRef(null);
+	useCountUp(digits, value, props);
+	const text = formatNumber(value, format, locale);
+	return renderElement("data", render, {
+		value,
+		text
+	}, {
+		"data-slot": "count-up",
+		...rest,
+		value: String(value),
+		className: cx("nz-number-value", "nz-count-up", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			ref: digits,
+			className: "nz-count-up-value",
+			"data-slot": "count-up-value",
+			"aria-hidden": "true",
+			children: text
+		}), /* @__PURE__ */ jsx("span", {
+			className: "nz-visually-hidden nz-count-up-label",
+			children: text
+		})] })
+	});
+}
+//#endregion
+export { CountUp, useCountUp };

package/dist/motion/index.d.ts

@@ -0,0 +1,2 @@
+import { CountUp, CountUpOptions, CountUpProps, CountUpState, useCountUp } from "./count-up.client.js";
+export { CountUp, type CountUpOptions, type CountUpProps, type CountUpState, useCountUp };

package/dist/motion/index.js

@@ -0,0 +1 @@
+export { CountUp, useCountUp } from "./count-up.client.js";

package/dist/nav-item/index.d.ts

@@ -0,0 +1,2 @@
+import { NavItem, NavItemProps, NavItemState } from "./nav-item.js";
+export { NavItem, type NavItemProps, type NavItemState };

package/dist/nav-item/index.js

@@ -0,0 +1 @@
+export { NavItem } from "./nav-item.js";

package/dist/nav-item/nav-item.d.ts

@@ -0,0 +1,35 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/nav-item/nav-item.d.ts
+export interface NavItemState {
+  current: boolean;
+  disabled: boolean;
+}
+export interface NavItemProps extends Omit<ComponentPropsWithRef<"a">, "children"> {
+  /**
+   * The destination being shown: sets `aria-current="page"` and draws the filled state (Figma
+   * State=Active). The page knows its own route, so it says which item is current. @default false
+   */
+  current?: boolean;
+  /** A decorative glyph before the label (20 px, Figma's Icon slot); it is `aria-hidden`. */
+  icon?: ReactNode;
+  /**
+   * A count after the label, such as the number of open orders (Figma's Count). Absent, or `null`,
+   * shows none. It is part of the link's text, so it is announced with the label.
+   */
+  count?: ReactNode;
+  /**
+   * Not available: renders a `<span role="link" aria-disabled="true">` with no `href`, so it is out
+   * of the Tab order and cannot be followed. `render` is ignored. @default false
+   */
+  disabled?: boolean;
+  /**
+   * The router's link, for example `render={<Link href="/orders" />}` (Next.js, React Router,
+   * TanStack Router). It must render an `<a>`.
+   */
+  render?: RenderProp<NavItemState>;
+  /** The label (Figma's Label). It stays the accessible name in the collapsed rail. */
+  children: ReactNode;
+}
+export declare function NavItem({ current, icon, count, disabled, render, className, children, ...rest }: NavItemProps): ReactElement;
+//#endregion

package/dist/nav-item/nav-item.js

@@ -0,0 +1,50 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { stateAttrs } from "../contracts/state.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/nav-item/nav-item.tsx
+function NavItem({ current = false, icon, count, disabled = false, render, className, children, ...rest }) {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon != null && /* @__PURE__ */ jsx("span", {
+			className: "nz-nav-item-icon",
+			"data-slot": "nav-item-icon",
+			"aria-hidden": "true",
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "nz-nav-item-label",
+			"data-slot": "nav-item-label",
+			children
+		}),
+		count != null && /* @__PURE__ */ jsx("span", {
+			className: "nz-nav-item-count",
+			"data-slot": "nav-item-count",
+			children: count
+		})
+	] });
+	if (disabled) {
+		const { href: _href, target: _target, rel: _rel, download: _download, ...attributes } = rest;
+		return /* @__PURE__ */ jsx("span", {
+			...attributes,
+			"data-slot": "nav-item",
+			...stateAttrs({ disabled: true }),
+			role: "link",
+			"aria-disabled": "true",
+			"aria-current": current ? "page" : rest["aria-current"],
+			className: cx("nz-nav-item", className),
+			children: content
+		});
+	}
+	return renderElement("a", render, {
+		current,
+		disabled
+	}, {
+		"data-slot": "nav-item",
+		...rest,
+		"aria-current": current ? "page" : rest["aria-current"],
+		className: cx("nz-nav-item", className),
+		children: content
+	});
+}
+//#endregion
+export { NavItem };

package/dist/number-value/index.d.ts

@@ -0,0 +1,2 @@
+import { NumberValue, NumberValueProps, NumberValueState, formatNumber } from "./number-value.js";
+export { NumberValue, type NumberValueProps, type NumberValueState, formatNumber };

package/dist/number-value/index.js

@@ -0,0 +1 @@
+export { NumberValue, formatNumber } from "./number-value.js";

package/dist/number-value/number-value.d.ts

@@ -0,0 +1,25 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/number-value/number-value.d.ts
+export interface NumberValueState {
+  value: number;
+  /** The formatted text the element shows. */
+  text: string;
+}
+export interface NumberValueProps extends Omit<ComponentPropsWithRef<"data">, "value" | "children"> {
+  /** The number. The element's `value` attribute carries it unformatted, for machines. */
+  value: number;
+  /** `Intl.NumberFormat` options (serialisable, so a Server Component can pass them). @default {} */
+  format?: Intl.NumberFormatOptions | undefined;
+  /** BCP 47 tag for the number. @default 'en-US' */
+  locale?: string | undefined;
+  render?: RenderProp<NumberValueState>;
+}
+/** The text NumberValue renders for `value`: `Intl.NumberFormat(locale, format)`, nothing else. */
+export declare function formatNumber(value: number, format?: Intl.NumberFormatOptions, locale?: string): string;
+/**
+ * A formatted number in a `<data>` element: tabular figures, isolated from the surrounding direction,
+ * never wrapped inside the number (§16.4). It takes the surrounding font; Metric gives it Numeric/*.
+ */
+export declare function NumberValue({ value, format, locale, render, className, ...rest }: NumberValueProps): ReactElement;
+//#endregion

package/dist/number-value/number-value.js

@@ -0,0 +1,26 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/number-value/number-value.tsx
+/** The text NumberValue renders for `value`: `Intl.NumberFormat(locale, format)`, nothing else. */
+function formatNumber(value, format = {}, locale = "en-US") {
+	return new Intl.NumberFormat(locale, format).format(value);
+}
+/**
+* A formatted number in a `<data>` element: tabular figures, isolated from the surrounding direction,
+* never wrapped inside the number (§16.4). It takes the surrounding font; Metric gives it Numeric/*.
+*/
+function NumberValue({ value, format, locale = "en-US", render, className, ...rest }) {
+	const text = formatNumber(value, format, locale);
+	return renderElement("data", render, {
+		value,
+		text
+	}, {
+		"data-slot": "number-value",
+		...rest,
+		value: String(value),
+		className: cx("nz-number-value", className),
+		children: text
+	});
+}
+//#endregion
+export { NumberValue, formatNumber };

package/dist/page-header/index.d.ts

@@ -0,0 +1,2 @@
+import { PageHeader, PageHeaderProps, PageHeaderTitleLevel } from "./page-header.js";
+export { PageHeader, type PageHeaderProps, type PageHeaderTitleLevel };

package/dist/page-header/index.js

@@ -0,0 +1 @@
+export { PageHeader } from "./page-header.js";

package/dist/page-header/page-header.d.ts

@@ -0,0 +1,19 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/page-header/page-header.d.ts
+export type PageHeaderTitleLevel = 1 | 2;
+export interface PageHeaderProps extends Omit<ComponentPropsWithRef<"header">, "title" | "children"> {
+  /** The page's title. One `<h1>` per page: the shell's top bar does not repeat it as a heading. */
+  title: ReactNode;
+  /** `2` for a page whose `<h1>` is elsewhere. Its look stays Heading/H1. @default 1 */
+  level?: PageHeaderTitleLevel;
+  /** Beside the title, for example a status `<Badge>`. */
+  meta?: ReactNode;
+  /** A line under the title, Body/M in `text/secondary`. */
+  description?: ReactNode;
+  /** The page's controls at the row's end, for example a SegmentedControl and Buttons. */
+  actions?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+export declare function PageHeader({ title, level, meta, description, actions, render, className, ...rest }: PageHeaderProps): ReactElement;
+//#endregion

package/dist/page-header/page-header.js

@@ -0,0 +1,39 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/page-header/page-header.tsx
+function PageHeader({ title, level = 1, meta, description, actions, render, className, ...rest }) {
+	const Title = `h${level}`;
+	return renderElement("header", render, {}, {
+		"data-slot": "page-header",
+		...rest,
+		className: cx("nz-page-header", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "nz-page-header-content",
+			"data-slot": "page-header-content",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "nz-page-header-heading",
+				"data-slot": "page-header-heading",
+				children: [/* @__PURE__ */ jsx(Title, {
+					className: "nz-page-header-title",
+					"data-slot": "page-header-title",
+					children: title
+				}), meta != null && /* @__PURE__ */ jsx("div", {
+					className: "nz-page-header-meta",
+					"data-slot": "page-header-meta",
+					children: meta
+				})]
+			}), description != null && /* @__PURE__ */ jsx("p", {
+				className: "nz-page-header-description",
+				"data-slot": "page-header-description",
+				children: description
+			})]
+		}), actions != null && /* @__PURE__ */ jsx("div", {
+			className: "nz-page-header-actions",
+			"data-slot": "page-header-actions",
+			children: actions
+		})] })
+	});
+}
+//#endregion
+export { PageHeader };

package/dist/pagination/index.d.ts

@@ -0,0 +1,2 @@
+import { Pagination, PaginationChangeReason, PaginationLabels, PaginationLinkState, PaginationProps, PaginationSize, PaginationSlot, PaginationState } from "./pagination.js";
+export { Pagination, type PaginationChangeReason, type PaginationLabels, type PaginationLinkState, type PaginationProps, type PaginationSize, type PaginationSlot, type PaginationState };

package/dist/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination } from "./pagination.js";

package/dist/pagination/pagination.d.ts

@@ -0,0 +1,74 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/pagination/pagination.d.ts
+/** 40 px (`md`) or 32 px (`sm`) squares; Figma's 36 px is off the control scale (figma/06). */
+export type PaginationSize = "sm" | "md";
+/** Pagination's own strings (§16.4): serialisable, English defaults; `{page}` is replaced. */
+export interface PaginationLabels {
+  /** The landmark's name. @default 'Pagination' */
+  nav: string;
+  /** The previous link's name (it shows only a chevron). @default 'Previous page' */
+  previous: string;
+  /** @default 'Next page' */
+  next: string;
+  /** Each page link's name; the visible number stays in it (WCAG 2.5.3). @default 'Page {page}' */
+  page: string;
+}
+/** Which control asked for the page. */
+export type PaginationChangeReason = "page" | "previous" | "next";
+/** One slot of the list: a page number or a gap. */
+export type PaginationSlot = number | "ellipsis";
+export interface PaginationLinkState {
+  /** The page this link goes to. */
+  page: number;
+  kind: "page" | "previous" | "next";
+  current: boolean;
+}
+export interface PaginationState {
+  page: number;
+  totalPages: number;
+  size: PaginationSize;
+}
+export interface PaginationProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+  /** The page being shown, from 1. Clamped to `1…totalPages`. */
+  page: number;
+  /** At least 1. */
+  totalPages: number;
+  /** Link mode: the URL of a page, for example `?page=3` for page 3. Give it or `onPageChange`. */
+  getHref?: (page: number) => string;
+  /**
+   * Button mode, for client state with no URL: the pages, previous and next are
+   * `<button type="button">`s, and choosing another page calls this with it (the current page calls
+   * nothing). `getHref` and `renderLink` are not used. A client component passes it.
+   */
+  onPageChange?: (page: number, details: ChangeDetails<PaginationChangeReason>) => void;
+  /** Pages shown either side of the current one. @default 1 */
+  siblingCount?: number;
+  /** Pages always shown at each end. @default 1 */
+  boundaryCount?: number;
+  /**
+   * With the defaults a long list is 9 slots: 392 px at `md`, 320 px at `sm`. In a narrower container
+   * the slots wrap, so use `sm` and `siblingCount={0}` (7 slots, 248 px) there. @default 'md'
+   */
+  size?: PaginationSize;
+  /** Text before the pages, for example "Showing 1–20 of 248" (Figma); you format it. */
+  summary?: ReactNode;
+  /** Replaces the chevron of the previous link (mirrored under `dir="rtl"` only by default). */
+  previousIcon?: ReactNode;
+  nextIcon?: ReactNode;
+  /** BCP 47 tag for the page numbers. @default 'en-US' */
+  locale?: string;
+  labels?: Partial<PaginationLabels>;
+  /**
+   * The router's link for every page, previous and next link, for example
+   * `renderLink={(props) => <Link {...props} href={String(props['href'])} />}`, or an element such
+   * as `renderLink={<RouterLink />}`, which receives `href` from `getHref`. It must render an `<a>`.
+   * A previous or next link at the ends is not a link and does not use it. Link mode only.
+   */
+  renderLink?: RenderProp<PaginationLinkState>;
+  /** Composition of the `<nav>` landmark (a single-root part's `render`, §8.2). */
+  render?: RenderProp<PaginationState>;
+}
+export declare function Pagination({ page, totalPages, getHref, onPageChange, siblingCount, boundaryCount, size, summary, previousIcon, nextIcon, locale, labels, renderLink, render, className, ...rest }: PaginationProps): ReactElement;
+//#endregion