@stridge/noctis 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/components/avatar/avatar.d.ts

@@ -38,7 +38,7 @@ declare function AvatarImage({
 }: Avatar.Image.Props): ReactElement;
 /**
  * Shown when no image loads — initials or a glyph on a static, accent-independent swatch. Pass `seed`
- * (a user id, name, or email) to hash a stable `bg-avatar-N` colour, so the same person always gets the
+ * (a user id, name, or email) to hash a stable `bg-palette-N` colour, so the same person always gets the
  * same hue; omit it for the neutral muted fill. Base UI handles the `delay` before it appears.
  */
 declare function AvatarFallback({
@@ -182,7 +182,7 @@ declare namespace Avatar {
   }
   namespace Fallback {
     type Props = avatar_d_exports.Avatar.Fallback.Props & {
-      /** A stable identifier hashed to one of ten `bg-avatar-N` swatches; omit for the neutral muted fill. */seed?: string;
+      /** A stable identifier hashed to one of ten `bg-palette-N` swatches; omit for the neutral muted fill. */seed?: string;
     };
     type State = avatar_d_exports.Avatar.Fallback.State;
     /** Argument to the `Avatar.Fallback.props(...)` escape-hatch helper. */

package/dist/components/avatar/avatar.js

@@ -72,7 +72,7 @@ function AvatarImage({ onLoadingStatusChange, className, ...props }) {
 }
 /**
 * Shown when no image loads — initials or a glyph on a static, accent-independent swatch. Pass `seed`
-* (a user id, name, or email) to hash a stable `bg-avatar-N` colour, so the same person always gets the
+* (a user id, name, or email) to hash a stable `bg-palette-N` colour, so the same person always gets the
 * same hue; omit it for the neutral muted fill. Base UI handles the `delay` before it appears.
 */
 function AvatarFallback({ seed, className, children, ...props }) {

package/dist/components/avatar/avatar.props.d.ts

@@ -28,7 +28,7 @@ type AvatarStatelessPropsArgs = BasePropsArgs;
 /** Argument to `Avatar.Fallback.props(...)` — the seed that selects the static swatch the fill reads. */
 interface AvatarFallbackPropsArgs extends BasePropsArgs {
   /**
-   * A stable identifier (a user id, name, or email) hashed to one of the ten `bg-avatar-N` swatches,
+   * A stable identifier (a user id, name, or email) hashed to one of the ten `bg-palette-N` swatches,
    * so the same person always lands on the same colour. Omit to fall back to the neutral muted fill.
    */
   seed?: string;

package/dist/components/avatar/avatar.slots.d.ts

@@ -16,7 +16,7 @@ declare enum AvatarDataAttributes {
   size = "data-size",
   /** The shape — `circle` (default, fully round) | `rounded` (rounded corners). */
   shape = "data-shape",
-  /** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-avatar-N` role from. */
+  /** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-palette-N` role from. */
   avatarIndex = "data-avatar-index",
   /** Present when the avatar is dimmed/inactive — gates interactive states and applies the disabled opacity. */
   disabled = "data-disabled",

package/dist/components/avatar/avatar.slots.js

@@ -29,7 +29,7 @@ let AvatarDataAttributes = /* @__PURE__ */ function(AvatarDataAttributes) {
 	AvatarDataAttributes["size"] = "data-size";
 	/** The shape — `circle` (default, fully round) | `rounded` (rounded corners). */
 	AvatarDataAttributes["shape"] = "data-shape";
-	/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-avatar-N` role from. */
+	/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-palette-N` role from. */
 	AvatarDataAttributes["avatarIndex"] = "data-avatar-index";
 	/** Present when the avatar is dimmed/inactive — gates interactive states and applies the disabled opacity. */
 	AvatarDataAttributes["disabled"] = "data-disabled";

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,114 @@
+import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
+import { BadgePartProps, BadgeRootPropsArgs, BadgeStatelessPropsArgs, dotProps, iconProps, rootProps } from "./badge.props.js";
+import { ComponentProps, ReactElement } from "react";
+
+//#region src/components/badge/badge.d.ts
+/**
+ * A small label for status, categorization, or metadata — a pill chip that sits inline with text or in
+ * a row of its own. The look is two orthogonal axes: `variant` is the emphasis (a filled `solid`, a
+ * quiet `soft` tint, or a transparent `outline`) and `tone` is the colour identity (the six semantic
+ * tones — `neutral`/`accent` and the four statuses — plus eight accent-independent decorative hues for
+ * categorization). Compose a leading `Badge.Dot` for an at-a-glance status dot or a `Badge.Icon` for a
+ * glyph; both inherit the chip's text colour so they stay legible in every variant.
+ *
+ * Decorative and accent-independent: the styling is precompiled CSS keyed off the `data-slot` anchor
+ * (`badge.css`), and the colour grid reads the semantic roles and the shared categorical palette directly, so a
+ * retheme propagates and a categorical tone never re-derives off the accent. Renders a `<span>` by
+ * default; spread `Badge.Root.props(...)` onto an `<a>` (or any element) to style it as a chip.
+ *
+ * @see {@link Badge.Root.Props}
+ */
+declare function BadgeRoot({
+  variant,
+  tone,
+  size,
+  className,
+  ...props
+}: Badge.Root.Props): ReactElement;
+/**
+ * An optional leading status dot. Decorative by default (`aria-hidden`) — the chip's label carries the
+ * meaning — so it is never a colour-only signal; pair a label like "Online" with it. Fills with the
+ * chip's `currentColor`, so it reads as a knockout on a `solid` chip and as the saturated tone on a
+ * `soft`/`outline` one.
+ */
+declare function BadgeDot({
+  className,
+  ...props
+}: Badge.Dot.Props): ReactElement;
+/**
+ * An optional leading icon. Clamps its glyph to the chip's icon size and inherits the chip's text
+ * colour. Decorative by default (`aria-hidden`); wrap an `<Icon>` or any inline svg inside it — don't
+ * put `data-slot` on the icon itself, which would drop its own token sizing.
+ */
+declare function BadgeIcon({
+  className,
+  children,
+  ...props
+}: Badge.Icon.Props): ReactElement;
+/**
+ * A small status/label chip. `Badge.Root` owns the pill and its `variant` (emphasis) + `tone` (colour)
+ * + `size`; compose a leading `Badge.Dot` (a status dot) or `Badge.Icon` (a glyph) before the label.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+ * the matching `Badge` namespace — e.g. `Badge.Root.Props`.
+ */
+declare const Badge: {
+  /** Owns the pill + its variant/tone/size. `Badge.Root.props({ variant, tone, size })` → its prop bag. */Root: typeof BadgeRoot & {
+    props: typeof rootProps;
+  }; /** A leading status dot (decorative). `Badge.Dot.props()` → its spreadable prop bag. */
+  Dot: typeof BadgeDot & {
+    props: typeof dotProps;
+  }; /** A leading icon glyph (decorative). `Badge.Icon.props()` → its spreadable prop bag. */
+  Icon: typeof BadgeIcon & {
+    props: typeof iconProps;
+  };
+};
+/**
+ * Per-part prop types. Types-only — it emits no runtime code and merges with the `Badge` object above,
+ * so `Badge.Root` is the component value while `Badge.Root.Props` is its prop type.
+ */
+declare namespace Badge {
+  /** Emphasis axis — `solid` | `soft` | `outline`. */
+  type Variant = BadgeVariant;
+  /** Colour identity — a semantic tone or a decorative hue. */
+  type Tone = BadgeTone;
+  /** Chip scale — `sm` | `md`. */
+  type Size = BadgeSize;
+  /** The spreadable data-attribute prop bag every `Badge.*.props()` returns (D12). */
+  type PartProps = BadgePartProps;
+  namespace Root {
+    type Props = ComponentProps<"span"> & {
+      /**
+       * Emphasis — a filled `solid` chip, a quiet `soft` tint, a transparent `outline`, or a
+       * neutral `dot` chip whose only colour is its leading `Badge.Dot`.
+       * @default "soft"
+       */
+      variant?: BadgeVariant;
+      /**
+       * Colour identity — a semantic tone (`neutral`/`accent`/`success`/`warning`/`danger`/`info`)
+       * or a decorative hue (`red`…`pink`) for categorization.
+       * @default "neutral"
+       */
+      tone?: BadgeTone;
+      /**
+       * Chip scale.
+       * @default "md"
+       */
+      size?: BadgeSize;
+    };
+    /** Argument to the `Badge.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = BadgeRootPropsArgs;
+  }
+  namespace Dot {
+    type Props = ComponentProps<"span">;
+    /** Argument to the `Badge.Dot.props(...)` escape-hatch helper. */
+    type PropsArgs = BadgeStatelessPropsArgs;
+  }
+  namespace Icon {
+    type Props = ComponentProps<"span">;
+    /** Argument to the `Badge.Icon.props(...)` escape-hatch helper. */
+    type PropsArgs = BadgeStatelessPropsArgs;
+  }
+}
+//#endregion
+export { Badge };

package/dist/components/badge/badge.js

@@ -0,0 +1,74 @@
+import { BADGE_SLOTS } from "./badge.slots.js";
+import { dotProps, iconProps, rootProps } from "./badge.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+/**
+* A small label for status, categorization, or metadata — a pill chip that sits inline with text or in
+* a row of its own. The look is two orthogonal axes: `variant` is the emphasis (a filled `solid`, a
+* quiet `soft` tint, or a transparent `outline`) and `tone` is the colour identity (the six semantic
+* tones — `neutral`/`accent` and the four statuses — plus eight accent-independent decorative hues for
+* categorization). Compose a leading `Badge.Dot` for an at-a-glance status dot or a `Badge.Icon` for a
+* glyph; both inherit the chip's text colour so they stay legible in every variant.
+*
+* Decorative and accent-independent: the styling is precompiled CSS keyed off the `data-slot` anchor
+* (`badge.css`), and the colour grid reads the semantic roles and the shared categorical palette directly, so a
+* retheme propagates and a categorical tone never re-derives off the accent. Renders a `<span>` by
+* default; spread `Badge.Root.props(...)` onto an `<a>` (or any element) to style it as a chip.
+*
+* @see {@link Badge.Root.Props}
+*/
+function BadgeRoot({ variant = "soft", tone = "neutral", size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": BADGE_SLOTS.root,
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		className,
+		...props
+	});
+}
+/**
+* An optional leading status dot. Decorative by default (`aria-hidden`) — the chip's label carries the
+* meaning — so it is never a colour-only signal; pair a label like "Online" with it. Fills with the
+* chip's `currentColor`, so it reads as a knockout on a `solid` chip and as the saturated tone on a
+* `soft`/`outline` one.
+*/
+function BadgeDot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": BADGE_SLOTS.dot,
+		"aria-hidden": true,
+		className,
+		...props
+	});
+}
+/**
+* An optional leading icon. Clamps its glyph to the chip's icon size and inherits the chip's text
+* colour. Decorative by default (`aria-hidden`); wrap an `<Icon>` or any inline svg inside it — don't
+* put `data-slot` on the icon itself, which would drop its own token sizing.
+*/
+function BadgeIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": BADGE_SLOTS.icon,
+		"aria-hidden": true,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* A small status/label chip. `Badge.Root` owns the pill and its `variant` (emphasis) + `tone` (colour)
+* + `size`; compose a leading `Badge.Dot` (a status dot) or `Badge.Icon` (a glyph) before the label.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+* the matching `Badge` namespace — e.g. `Badge.Root.Props`.
+*/
+const Badge = {
+	/** Owns the pill + its variant/tone/size. `Badge.Root.props({ variant, tone, size })` → its prop bag. */
+	Root: Object.assign(BadgeRoot, { props: rootProps }),
+	/** A leading status dot (decorative). `Badge.Dot.props()` → its spreadable prop bag. */
+	Dot: Object.assign(BadgeDot, { props: dotProps }),
+	/** A leading icon glyph (decorative). `Badge.Icon.props()` → its spreadable prop bag. */
+	Icon: Object.assign(BadgeIcon, { props: iconProps })
+};
+//#endregion
+export { Badge };

package/dist/components/badge/badge.props.d.ts

@@ -0,0 +1,42 @@
+import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
+
+//#region src/components/badge/badge.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Badge.*.props()` returns. */
+type BadgePartProps = {
+  /** The slot value the matching `badge.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Badge.Root.props(...)` — the chip's variant + tone + size. */
+interface BadgeRootPropsArgs extends BasePropsArgs {
+  /** Emphasis — `solid` (filled) | `soft` (tint) | `outline` (edge) | `dot` (neutral chip, coloured dot). @default "soft" */
+  variant?: BadgeVariant;
+  /** Colour identity — a semantic tone or a decorative hue. @default "neutral" */
+  tone?: BadgeTone;
+  /** Chip scale. @default "md" */
+  size?: BadgeSize;
+}
+/** Argument to a stateless part's `.props(...)` — no recipe of its own; colour flows from the root. */
+type BadgeStatelessPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-variant`/`data-tone`/`data-size` the colour grid reads. */
+declare function rootProps({
+  variant,
+  tone,
+  size,
+  className
+}?: BadgeRootPropsArgs): BadgePartProps;
+/** Dot prop bag: just the slot anchor (it fills with the chip's `currentColor`). */
+declare function dotProps({
+  className
+}?: BadgeStatelessPropsArgs): BadgePartProps;
+/** Icon prop bag: just the slot anchor (the glyph is clamped to the chip's icon size and inherits its colour). */
+declare function iconProps({
+  className
+}?: BadgeStatelessPropsArgs): BadgePartProps;
+//#endregion
+export { BadgePartProps, BadgeRootPropsArgs, BadgeStatelessPropsArgs, dotProps, iconProps, rootProps };

package/dist/components/badge/badge.props.js

@@ -0,0 +1,42 @@
+import { BADGE_SLOTS } from "./badge.slots.js";
+//#region src/components/badge/badge.props.ts
+/**
+* The D12 unified variant contract for Badge — the data-attribute-native styling helpers.
+*
+* Each compound part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-badge-<part>", ...dataAttrs }`, derived from the part's variant/tone/size
+* inputs. Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `badge.css` keys every rule off it plus the `data-*` recipe — so spreading a part's `props()` onto a
+* *foreign* element styles it as that part:
+*
+*     <a {...Badge.Root.props({ tone: "success" })} href="/status">Live</a>
+*     // → <a data-slot="noctis-badge" data-variant="soft" data-tone="success" data-size="md">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same variant→data-attribute→values mapping is
+* emitted as data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React /
+* agent consumers can hand-write the markup from the docs.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-variant`/`data-tone`/`data-size` the colour grid reads. */
+function rootProps({ variant = "soft", tone = "neutral", size = "md", className } = {}) {
+	return withClassName({
+		"data-slot": BADGE_SLOTS.root,
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size
+	}, className);
+}
+/** Dot prop bag: just the slot anchor (it fills with the chip's `currentColor`). */
+function dotProps({ className } = {}) {
+	return withClassName({ "data-slot": BADGE_SLOTS.dot }, className);
+}
+/** Icon prop bag: just the slot anchor (the glyph is clamped to the chip's icon size and inherits its colour). */
+function iconProps({ className } = {}) {
+	return withClassName({ "data-slot": BADGE_SLOTS.icon }, className);
+}
+//#endregion
+export { dotProps, iconProps, rootProps };

package/dist/components/badge/badge.slots.d.ts

@@ -0,0 +1,19 @@
+//#region src/components/badge/badge.slots.d.ts
+/**
+ * The `data-*` hooks `Badge` stamps on its parts, for host-side styling and tests. The slot values
+ * mark each rendered element; the `data-variant`/`data-tone`/`data-size` axes carry the recipe the
+ * precompiled `badge.css` keys its colour grid and per-size metrics off. The dot and icon take no
+ * axis of their own — they ride the chip's `currentColor`, so they stay legible in every variant.
+ */
+declare enum BadgeDataAttributes {
+  /** The root chip element. */
+  slot = "data-slot",
+  /** The emphasis — `solid` (filled) | `soft` (tint, default) | `outline` (transparent, coloured edge). */
+  variant = "data-variant",
+  /** The colour identity — a semantic tone (`neutral`…`info`) or a decorative hue (`red`…`pink`). */
+  tone = "data-tone",
+  /** The chip scale — `sm` | `md` (default); the generated layer keys the per-size internals off it. */
+  size = "data-size"
+}
+//#endregion
+export { BadgeDataAttributes };

package/dist/components/badge/badge.slots.js

@@ -0,0 +1,30 @@
+//#region src/components/badge/badge.slots.ts
+/**
+* The slot vocabulary every `Badge` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix;
+* SLOTS.md still generates from the token-graph declarations.
+*/
+const BADGE_SLOTS = {
+	root: "noctis-badge",
+	dot: "noctis-badge-dot",
+	icon: "noctis-badge-icon"
+};
+/**
+* The `data-*` hooks `Badge` stamps on its parts, for host-side styling and tests. The slot values
+* mark each rendered element; the `data-variant`/`data-tone`/`data-size` axes carry the recipe the
+* precompiled `badge.css` keys its colour grid and per-size metrics off. The dot and icon take no
+* axis of their own — they ride the chip's `currentColor`, so they stay legible in every variant.
+*/
+let BadgeDataAttributes = /* @__PURE__ */ function(BadgeDataAttributes) {
+	/** The root chip element. */
+	BadgeDataAttributes["slot"] = "data-slot";
+	/** The emphasis — `solid` (filled) | `soft` (tint, default) | `outline` (transparent, coloured edge). */
+	BadgeDataAttributes["variant"] = "data-variant";
+	/** The colour identity — a semantic tone (`neutral`…`info`) or a decorative hue (`red`…`pink`). */
+	BadgeDataAttributes["tone"] = "data-tone";
+	/** The chip scale — `sm` | `md` (default); the generated layer keys the per-size internals off it. */
+	BadgeDataAttributes["size"] = "data-size";
+	return BadgeDataAttributes;
+}({});
+//#endregion
+export { BADGE_SLOTS, BadgeDataAttributes };

package/dist/components/badge/badge.types.d.ts

@@ -0,0 +1,24 @@
+//#region src/components/badge/badge.types.d.ts
+/**
+ * The variant/tone/size vocabulary `Badge` paints. Authored source of truth since styling is
+ * precompiled in `badge.css`. Types-only: no runtime code, so it never participates in the styling
+ * layer.
+ */
+/**
+ * A badge's emphasis — a filled `solid` chip, a quiet `soft` tint, a transparent `outline` with a
+ * coloured edge, or a neutral `dot` chip whose only colour is its leading status dot (the rest of the
+ * chip stays neutral). Crossed with {@link BadgeTone} to form the colour grid.
+ */
+type BadgeVariant = "solid" | "soft" | "outline" | "dot";
+/**
+ * A badge's colour identity. The six **semantic** tones carry meaning — `neutral` (the default
+ * metadata chip), `accent`, and the four statuses `success`/`warning`/`danger`/`info`. The eight
+ * **decorative** tones (`red`/`orange`/`amber`/`green`/`teal`/`blue`/`purple`/`pink`) are
+ * accent-independent category colours drawn from the shared categorical palette — use them to distinguish
+ * categories, not to signal status.
+ */
+type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info" | "red" | "orange" | "amber" | "green" | "teal" | "blue" | "purple" | "pink";
+/** A badge's chip scale — `sm` (the inline-with-text chip) or `md` (the default). */
+type BadgeSize = "sm" | "md";
+//#endregion
+export { BadgeSize, BadgeTone, BadgeVariant };

package/dist/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+import { BadgeSize, BadgeTone, BadgeVariant } from "./badge.types.js";
+import { Badge } from "./badge.js";
+import { BadgeDataAttributes } from "./badge.slots.js";

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,3 @@
+import { PaginationLabels, PaginationSize } from "./pagination.types.js";
+import { Pagination } from "./pagination.js";
+import { PaginationDataAttributes } from "./pagination.slots.js";

package/dist/components/pagination/pagination.context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/pagination/pagination.context.ts
+const PaginationContext = createContext(null);
+const PaginationProvider = PaginationContext.Provider;
+/**
+* Read the enclosing `Pagination.Root` state. Every compound part is meaningless on its own (it needs
+* the page model and shared labels), so this throws a part-named error when used outside the root.
+*/
+function usePaginationContext(part) {
+	const context = use(PaginationContext);
+	if (!context) throw new Error(`Pagination.${part} must be rendered inside a <Pagination.Root>.`);
+	return context;
+}
+//#endregion
+export { PaginationProvider, usePaginationContext };

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,217 @@
+import { Button } from "../button/button.js";
+import { PaginationLabels, PaginationSize } from "./pagination.types.js";
+import { PaginationPartProps, PaginationRootPropsArgs, controlsProps, infoProps, pageProps, pageSizeLabelProps, pageSizeProps, rootProps, separatorProps } from "./pagination.props.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+
+//#region src/components/pagination/pagination.d.ts
+/**
+ * Page navigation: a row of nav controls (a welded `ButtonGroup` of First/Previous/Next/Last buttons),
+ * an optional editable page field, a "Showing X–Y of Z" info line, and a page-size picker — composed
+ * from the shipped `Button`, `ButtonGroup`, `Input`, and `Select`. `Pagination.Root` is controlled:
+ * pass `page` + `onPageChange`, and `total` + `perPage` (so the info line and the last-page bound can
+ * be computed) or an explicit `pageCount`. Every part reads the shared model through context, so the
+ * bounds-disabling and clamping are handled for you.
+ *
+ * @see {@link Pagination.Root.Props}
+ */
+declare function PaginationRoot({
+  page,
+  onPageChange,
+  total,
+  perPage,
+  pageCount: pageCountProp,
+  size,
+  labels: labelsProp,
+  className,
+  children,
+  ...props
+}: Pagination.Root.Props): ReactElement;
+/** The render-prop state `Pagination.Info` exposes for custom info text. */
+interface PaginationInfoState {
+  /** Current page, 1-indexed. */
+  page: number;
+  /** The last reachable page. */
+  pageCount: number;
+  /** Items per page, when known. */
+  perPage?: number;
+  /** Total item count, when known. */
+  total?: number;
+  /** First item index on the current page (1-indexed), or 0 when the set is empty. */
+  from: number;
+  /** Last item index on the current page. */
+  to: number;
+}
+/**
+ * The "Showing X–Y of Z" status line, announced politely as the page changes. Renders nothing unless
+ * `total` and `perPage` are known on the root — or pass a render function as children for custom text
+ * (e.g. "Page X of Y"). Quieter than the controls by design.
+ */
+declare function PaginationInfo({
+  children,
+  className,
+  ...props
+}: Pagination.Info.Props): ReactElement | null;
+/**
+ * The page-size cluster — a layout wrapper that holds a `Pagination.PageSizeLabel` and a
+ * `Pagination.PageSizeSelect` side by side. Compose them inside; the label and select are separate so
+ * the consumer can reorder, restyle, translate, or drop either independently.
+ */
+declare function PaginationPageSize({
+  className,
+  children,
+  ...props
+}: Pagination.PageSize.Props): ReactElement;
+/**
+ * The label beside the page-size select (visible "Per page" micro-copy). Defaults to the localized
+ * label; pass children to override the text. Purely visual — the select carries its own accessible name.
+ */
+declare function PaginationPageSizeLabel({
+  className,
+  children,
+  ...props
+}: Pagination.PageSizeLabel.Props): ReactElement;
+/**
+ * The page-size `Select` of "items per page" choices. Controlled via `value` + `onValueChange`;
+ * resetting the page to 1 on change is the consumer's call (do it in the handler).
+ */
+declare function PaginationPageSizeSelect({
+  value,
+  onValueChange,
+  options
+}: Pagination.PageSizeSelect.Props): ReactElement;
+/**
+ * The navigation landmark wrapping a welded `ButtonGroup` of nav buttons. Compose `Pagination.First`,
+ * `Pagination.Previous`, `Pagination.Next`, `Pagination.Last`, and/or `Pagination.Page` inside — use
+ * only Previous/Next for a simple control, or add First/Last/Page for the full set.
+ */
+declare function PaginationControls({
+  className,
+  children,
+  ...props
+}: Pagination.Controls.Props): ReactElement;
+/** Jump to the first page. Disabled on page 1. */
+declare function PaginationFirst(props: Pagination.NavButton.Props): ReactElement;
+/** Step to the previous page. Disabled on page 1. */
+declare function PaginationPrevious(props: Pagination.NavButton.Props): ReactElement;
+/** Step to the next page. Disabled on the last page. */
+declare function PaginationNext(props: Pagination.NavButton.Props): ReactElement;
+/** Jump to the last page. Disabled on the last page. */
+declare function PaginationLast(props: Pagination.NavButton.Props): ReactElement;
+/**
+ * An editable page-number field (the "full" affordance). Type a page and press Enter or blur to commit;
+ * the value is clamped to the valid range and snaps back if cleared. Sits beside the nav buttons.
+ */
+declare function PaginationPage({
+  className,
+  ...props
+}: Pagination.Page.Props): ReactElement;
+/** A vertical hairline between pagination clusters. Purely decorative — a quiet visual rule, hidden
+ * from assistive tech (the clusters are already distinct landmarks/labels). */
+declare function PaginationSeparator({
+  className,
+  ...props
+}: Pagination.Separator.Props): ReactElement;
+/**
+ * Page navigation controls. `Pagination.Root` owns the controlled page model and shares it with the
+ * parts: `Pagination.Controls` (the welded nav `ButtonGroup`) hosting `Pagination.First` / `Previous` /
+ * `Next` / `Last` and the editable `Pagination.Page`, plus the `Pagination.Info` status line, the
+ * `Pagination.PageSize` picker, and the `Pagination.Separator` divider.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+ * the matching `Pagination` namespace — e.g. `Pagination.Root.Props`.
+ */
+declare const Pagination: {
+  /** Owns the controlled page model + shared context. `Pagination.Root.props({ size })` → its prop bag. */Root: typeof PaginationRoot & {
+    props: typeof rootProps;
+  }; /** The "Showing X–Y of Z" status line. `Pagination.Info.props()` → its prop bag. */
+  Info: typeof PaginationInfo & {
+    props: typeof infoProps;
+  }; /** The page-size cluster (compose `PageSizeLabel` + `PageSizeSelect`). `Pagination.PageSize.props()` → its prop bag. */
+  PageSize: typeof PaginationPageSize & {
+    props: typeof pageSizeProps;
+  }; /** The page-size label. `Pagination.PageSizeLabel.props()` → its prop bag. */
+  PageSizeLabel: typeof PaginationPageSizeLabel & {
+    props: typeof pageSizeLabelProps;
+  }; /** The page-size select control. */
+  PageSizeSelect: typeof PaginationPageSizeSelect; /** The nav landmark + welded `ButtonGroup`. `Pagination.Controls.props()` → its prop bag. */
+  Controls: typeof PaginationControls & {
+    props: typeof controlsProps;
+  }; /** First-page button. */
+  First: typeof PaginationFirst; /** Previous-page button. */
+  Previous: typeof PaginationPrevious; /** Next-page button. */
+  Next: typeof PaginationNext; /** Last-page button. */
+  Last: typeof PaginationLast; /** The editable page-number field. `Pagination.Page.props()` → its prop bag. */
+  Page: typeof PaginationPage & {
+    props: typeof pageProps;
+  }; /** A vertical divider between clusters. `Pagination.Separator.props()` → its prop bag. */
+  Separator: typeof PaginationSeparator & {
+    props: typeof separatorProps;
+  };
+};
+/**
+ * Per-part prop types. Types-only — it emits no runtime code and merges with the `Pagination` object
+ * above, so `Pagination.Root` is the component value while `Pagination.Root.Props` is its prop type.
+ */
+declare namespace Pagination {
+  /** Control scale — `sm` | `md`. */
+  type Size = PaginationSize;
+  /** The accessible-name + micro-copy overrides. */
+  type Labels = PaginationLabels;
+  /** The spreadable data-attribute prop bag every owned `Pagination.*.props()` returns (D12). */
+  type PartProps = PaginationPartProps;
+  namespace Root {
+    type Props = Omit<ComponentProps<"div">, "onChange"> & {
+      /**
+       * Current page, 1-indexed.
+       * @default 1
+       */
+      page?: number; /** Called with the next page (already clamped to `[1, pageCount]`) when the user navigates. */
+      onPageChange?: (page: number) => void; /** Total item count across all pages — drives the info range and the last-page bound. */
+      total?: number; /** Items shown per page — drives the info range and the last-page bound. */
+      perPage?: number; /** The last reachable page, when you'd rather supply it than derive it from `total`/`perPage`. */
+      pageCount?: number;
+      /**
+       * Control scale, fed to the hosted Button/Input/Select.
+       * @default "md"
+       */
+      size?: PaginationSize; /** Per-instance overrides for the accessible names + micro-copy. */
+      labels?: PaginationLabels;
+    };
+    /** Argument to the `Pagination.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = PaginationRootPropsArgs;
+  }
+  namespace Info {
+    type Props = Omit<ComponentProps<"div">, "children"> & {
+      /** Render function for custom info text; omit for the default "Showing X–Y of Z". */children?: (state: PaginationInfoState) => ReactNode;
+    };
+  }
+  namespace PageSize {
+    /** The cluster wrapper — compose `Pagination.PageSizeLabel` and `Pagination.PageSizeSelect` inside. */
+    type Props = ComponentProps<"div">;
+  }
+  namespace PageSizeLabel {
+    /** The visible "Per page" label; children override the default localized text. */
+    type Props = ComponentProps<"span">;
+  }
+  namespace PageSizeSelect {
+    type Props = {
+      /** The current page size. */value: number; /** Called with the chosen page size. */
+      onValueChange: (size: number) => void; /** The available page-size choices. @default [10, 25, 50, 100] */
+      options?: readonly number[];
+    };
+  }
+  namespace Controls {
+    type Props = ComponentProps<"nav">;
+  }
+  namespace NavButton {
+    type Props = Omit<Button.Props, "iconOnly" | "startIcon" | "endIcon" | "onClick" | "children">;
+  }
+  namespace Page {
+    type Props = ComponentProps<"div">;
+  }
+  namespace Separator {
+    type Props = ComponentProps<"div">;
+  }
+}
+//#endregion
+export { Pagination };