@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/option-tile.js

@@ -1,142 +1,63 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { useId, useRef } from "react";
-import { Check } from "lucide-react";
-function OptionTile({
-  selected,
-  label,
-  onClick,
-  icon,
-  disabled = false,
-  multiple = false,
-  tabIndex,
-  onKeyDown,
-  buttonRef,
-  fullSpan = false,
-  className = ""
-}) {
-  return /* @__PURE__ */ React.createElement(
-    "button",
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { ChoiceCardControl, ChoiceCardGroup } from "./internal/choice-card.js";
+function OptionTile({ selected, label, onClick, icon, disabled, multiple = false, tabIndex, fullSpan, className }) {
+  return /* @__PURE__ */ jsx(
+    ChoiceCardControl,
     {
-      type: "button",
-      role: multiple ? "checkbox" : "radio",
-      "aria-checked": selected,
-      tabIndex,
+      control: multiple ? "checkbox" : "radio",
+      layout: "tile",
+      selected,
+      onSelect: onClick,
+      icon,
       disabled,
-      ref: buttonRef,
-      onClick,
-      onKeyDown,
-      className: [
-        "relative flex w-full flex-col items-center justify-center gap-2 rounded-(--radius-card) border text-center transition-all",
-        icon ? "min-h-[88px] px-3 py-4" : "min-h-[52px] px-3 py-3",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2",
-        selected ? "[border-color:var(--option-tile-border-active)] [background:var(--option-tile-bg-active)]" : "[border-color:var(--option-tile-border)] [background:var(--option-tile-bg)] hover:[border-color:var(--option-tile-border-hover)]",
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-        fullSpan ? "col-span-full" : "",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    selected && /* @__PURE__ */ React.createElement("span", { className: "absolute right-2 top-2 flex size-4 items-center justify-center rounded-full [background:var(--option-tile-check)] [color:var(--option-tile-check-icon)]" }, /* @__PURE__ */ React.createElement(Check, { size: 11, strokeWidth: 3 })),
-    icon && /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: [
-          "flex size-10 items-center justify-center rounded-(--radius-card) transition-colors [&_svg]:size-5",
-          selected ? "[background:var(--option-tile-icon-bg-active)] [color:var(--option-tile-icon-active)]" : "[background:var(--option-tile-icon-bg)] [color:var(--option-tile-icon)]"
-        ].join(" ")
-      },
-      icon
-    ),
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: [
-          icon ? "text-caption" : "text-label",
-          "font-semibold leading-tight",
-          selected ? "[color:var(--option-tile-label-active)]" : "[color:var(--option-tile-label)]"
-        ].join(" ")
-      },
-      label
-    )
+      tabIndex,
+      className,
+      style: fullSpan ? { gridColumn: "1 / -1" } : void 0,
+      children: label
+    }
   );
 }
 function OptionTileGrid(props) {
-  const { label, options, columns = 3, className = "" } = props;
-  const ariaLabel = props["aria-label"];
-  const multiple = props.multiple === true;
-  const groupId = useId();
-  const btns = useRef([]);
-  const isSel = (v) => multiple ? props.value.includes(v) : props.value === v;
-  const activate = (v) => {
-    if (props.multiple) {
-      const cur = props.value;
-      props.onChange(cur.includes(v) ? cur.filter((x) => x !== v) : [...cur, v]);
-    } else {
-      props.onChange(v);
-    }
-  };
-  const activeIdx = multiple ? -1 : Math.max(0, options.findIndex((o) => isSel(o.value)));
-  const move = (i) => {
-    var _a;
-    const n = options.length;
-    const idx = (i % n + n) % n;
-    (_a = btns.current[idx]) == null ? void 0 : _a.focus();
-    if (!multiple) activate(options[idx].value);
+  var _a;
+  const { label, options, className } = props;
+  const legend = (_a = label != null ? label : props["aria-label"]) != null ? _a : "";
+  const tile = (opt) => {
+    const Icon = opt.icon;
+    return {
+      key: opt.value,
+      value: opt.value,
+      icon: Icon ? /* @__PURE__ */ jsx(Icon, {}) : void 0,
+      style: opt.fullSpan ? { gridColumn: "1 / -1" } : void 0,
+      children: opt.label
+    };
   };
-  const onKeyDown = (e, i) => {
-    if (multiple) return;
-    switch (e.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        e.preventDefault();
-        move(i + 1);
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        e.preventDefault();
-        move(i - 1);
-        break;
-      case "Home":
-        e.preventDefault();
-        move(0);
-        break;
-      case "End":
-        e.preventDefault();
-        move(options.length - 1);
-        break;
-    }
-  };
-  const grid = /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      id: groupId,
-      role: multiple ? "group" : "radiogroup",
-      "aria-label": ariaLabel,
-      className: ["grid gap-2", columns === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3", label ? "" : className].join(" ")
-    },
-    options.map((opt, i) => {
-      const Icon = opt.icon;
-      return /* @__PURE__ */ React.createElement(
-        OptionTile,
-        {
-          key: opt.value,
-          multiple,
-          selected: isSel(opt.value),
-          label: opt.label,
-          icon: Icon ? /* @__PURE__ */ React.createElement(Icon, null) : void 0,
-          fullSpan: opt.fullSpan,
-          onClick: () => activate(opt.value),
-          tabIndex: multiple ? 0 : i === activeIdx ? 0 : -1,
-          onKeyDown: (e) => onKeyDown(e, i),
-          buttonRef: (el) => {
-            btns.current[i] = el;
-          }
-        }
+  if (props.multiple) {
+    const { value: value2, onChange: onChange2 } = props;
+    return /* @__PURE__ */ jsx(ChoiceCardGroup, { legend, layout: "tile", className, children: options.map((opt) => {
+      const _a2 = tile(opt), { key } = _a2, rest = __objRest(_a2, ["key"]);
+      return /* @__PURE__ */ jsx(
+        ChoiceCardControl,
+        __spreadProps(__spreadValues({}, rest), {
+          value: void 0,
+          control: "checkbox",
+          selected: value2.includes(opt.value),
+          onSelect: () => onChange2(value2.includes(opt.value) ? value2.filter((v) => v !== opt.value) : [...value2, opt.value])
+        }),
+        key
       );
-    })
-  );
-  if (!label) return grid;
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-2", className].join(" ") }, /* @__PURE__ */ React.createElement("span", { className: "text-label font-medium text-fg-primary" }, label), grid);
+    }) });
+  }
+  const { value, onChange } = props;
+  return /* @__PURE__ */ jsx(ChoiceCardGroup, { legend, layout: "tile", value: value != null ? value : "", onValueChange: (next) => onChange(next), className, children: options.map((opt) => {
+    const _a2 = tile(opt), { key } = _a2, rest = __objRest(_a2, ["key"]);
+    return /* @__PURE__ */ jsx(ChoiceCardControl, __spreadProps(__spreadValues({}, rest), { control: "radio" }), key);
+  }) });
 }
 export {
   OptionTile,

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

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type PageHeaderHeading = 'h1' | 'h2' | 'h3';
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The screen's name (Figma: `title`). It does not repeat the path. */
+    title: ReactNode;
+    /** What the screen does, in one sentence (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** Where the person is: a Breadcrumb (Figma: `showBreadcrumb`). */
+    breadcrumb?: ReactNode;
+    /** Up to two actions on the right, the main one a Button action fill (Figma: the `actions` slot). */
+    actions?: ReactNode;
+    /**
+     * A TabsList, when the screen splits into views (Figma: `showTabs`). The Tabs root wraps the PageHeader and the
+     * TabsContent panels under it.
+     */
+    tabs?: ReactNode;
+    /**
+     * The title's heading level. h1 (default) for the top of a screen, inside a <header>; h2 or h3 for a section
+     * inside the page, following its outline (then a <div>). Not in the Figma: it only changes the semantics.
+     */
+    titleAs?: PageHeaderHeading;
+}
+/**
+ * PageHeader — Figma [RDS] Navigation/PageHeader. The top of a screen: path, title, what it does, the main actions
+ * and, when the screen splits, the tabs. On a phone the actions go under the title. Styles: page-header.css.
+ */
+declare function PageHeader({ title, description, breadcrumb, actions, tabs, titleAs, className, ...rest }: PageHeaderProps): react.JSX.Element;
+
+export { PageHeader, type PageHeaderHeading, type PageHeaderProps };

package/dist/components/page-header.js

@@ -0,0 +1,25 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageHeader(_a) {
+  var _b = _a, { title, description, breadcrumb, actions, tabs, titleAs = "h1", className } = _b, rest = __objRest(_b, ["title", "description", "breadcrumb", "actions", "tabs", "titleAs", "className"]);
+  const Root = titleAs === "h1" ? "header" : "div";
+  const Title = titleAs;
+  return /* @__PURE__ */ jsxs(Root, __spreadProps(__spreadValues({}, rest), { className: ["rds-page-header", className].filter(Boolean).join(" "), children: [
+    breadcrumb,
+    /* @__PURE__ */ jsxs("div", { className: "rds-page-header__row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rds-page-header__heading", children: [
+        /* @__PURE__ */ jsx(Title, { className: "rds-page-header__title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "rds-page-header__description", children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "rds-page-header__actions", children: actions })
+    ] }),
+    tabs
+  ] }));
+}
+export {
+  PageHeader
+};

package/dist/components/page-shell.d.ts

@@ -3,12 +3,18 @@ import { ReactNode } from 'react';
 
 type PageShellWidth = 'narrow' | 'default' | 'wide';
 interface PageShellProps {
+    /** narrow 768, default 1280, wide 1536. */
     maxWidth?: PageShellWidth;
+    /** The page's gutters: 24 on top and bottom, 16 on the sides (24 from 640, 32 from 1024). Default true. */
     padded?: boolean;
     children: ReactNode;
     className?: string;
 }
-declare function PageShell({ maxWidth, padded, children, className, }: PageShellProps): react.JSX.Element;
+/**
+ * PageShell — the page container: centred, at most `maxWidth` wide, with the page's gutters. PageShell.Header is
+ * the PageHeader (deprecated wrapper) and PageShell.Body stacks the sections 24 apart. Styles: page-shell.css.
+ */
+declare function PageShell({ maxWidth, padded, children, className }: PageShellProps): react.JSX.Element;
 declare namespace PageShell {
     var Header: typeof PageShellHeader;
     var Body: typeof PageShellBody;
@@ -19,6 +25,10 @@ interface PageShellHeaderProps {
     actions?: ReactNode;
     className?: string;
 }
+/**
+ * @deprecated Use PageHeader (Figma [RDS] Navigation/PageHeader). A thin wrapper over it: title and actions pass
+ * through; eyebrow (not in the Figma) becomes the description line.
+ */
 declare function PageShellHeader({ title, eyebrow, actions, className }: PageShellHeaderProps): react.JSX.Element;
 interface PageShellBodyProps {
     children: ReactNode;

package/dist/components/page-shell.js

@@ -1,33 +1,14 @@
 import "../chunk-ORMEWXMH.js";
-const WIDTH_CLS = {
-  narrow: "max-w-screen-md",
-  default: "max-w-screen-xl",
-  wide: "max-w-screen-2xl"
-};
-function PageShell({
-  maxWidth = "default",
-  padded = true,
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: [
-        "mx-auto w-full",
-        WIDTH_CLS[maxWidth],
-        padded ? "px-4 sm:px-6 lg:px-8 py-6" : "",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    children
-  );
+import { jsx } from "react/jsx-runtime";
+import { PageHeader } from "./page-header.js";
+function PageShell({ maxWidth = "default", padded = true, children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: ["rds-page-shell", `rds-page-shell--${maxWidth}`, padded && "rds-page-shell--padded", className].filter(Boolean).join(" "), children });
 }
-function PageShellHeader({ title, eyebrow, actions, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex items-start justify-between gap-4 mb-6", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, eyebrow && /* @__PURE__ */ React.createElement("p", { className: "text-caption font-medium text-fg-muted mb-1" }, eyebrow), /* @__PURE__ */ React.createElement("h1", { className: "text-heading-md font-semibold text-fg-primary truncate" }, title)), actions && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 shrink-0" }, actions));
+function PageShellHeader({ title, eyebrow, actions, className }) {
+  return /* @__PURE__ */ jsx(PageHeader, { title, description: eyebrow, actions, className: ["rds-page-shell__header", className].filter(Boolean).join(" ") });
 }
-function PageShellBody({ children, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { className: ["space-y-6", className].filter(Boolean).join(" ") }, children);
+function PageShellBody({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: ["rds-page-shell__body", className].filter(Boolean).join(" "), children });
 }
 PageShell.Header = PageShellHeader;
 PageShell.Body = PageShellBody;

package/dist/components/page-skeleton.d.ts

@@ -1,35 +1,29 @@
 import * as react from 'react';
 
 /**
- * PageSkeleton — loading state padrão pra páginas com tabela.
- * Header (título + botão) + tabela com header + N rows.
- *
- * `padded` (default true) controla o padding interno. Use `padded={false}`
- * quando o skeleton já vive dentro de um container que aplica padding
- * (ex.: PageRoot/PageLayout), evitando padding duplicado.
- *
- * Uso:
- *   <PageSkeleton rows={8} />
- *   <PageSkeleton rows={8} padded={false} />  // dentro de um container
+ * PageSkeleton and CardsSkeleton — compositions of the Skeleton (Figma [RDS] Content/Skeleton) inside Cards: the
+ * loading state of a page, in the shape of what is coming. The region is aria-busy and says "Carregando…" to
+ * screen readers only; the shapes are hidden from them. Styles: page-skeleton.css.
  */
 interface PageSkeletonProps {
+    /** How many table rows. Default 5. */
     rows?: number;
+    /** The page's padding (24). Turn it off inside a container that already pads. Default true. */
     padded?: boolean;
+    /** What screen readers hear. */
+    label?: string;
 }
-declare function PageSkeleton({ rows, padded }: PageSkeletonProps): react.JSX.Element;
-/**
- * CardsSkeleton — loading state pra páginas com KPIs (4 cards no topo + 2 charts).
- *
- * `padded` (default true) — ver PageSkeleton.
- *
- * Uso:
- *   <CardsSkeleton count={4} />
- *   <CardsSkeleton count={4} padded={false} />  // dentro de um container
- */
+/** A page with a table: the title and a button, then the table's header and `rows` rows. */
+declare function PageSkeleton({ rows, padded, label }: PageSkeletonProps): react.JSX.Element;
 interface CardsSkeletonProps {
+    /** How many indicator cards. Default 4. */
     count?: number;
+    /** The page's padding (24). Turn it off inside a container that already pads. Default true. */
     padded?: boolean;
+    /** What screen readers hear. */
+    label?: string;
 }
-declare function CardsSkeleton({ count, padded }: CardsSkeletonProps): react.JSX.Element;
+/** A page of indicators: the title, `count` cards (2 per row, 4 from 1024) and two charts. */
+declare function CardsSkeleton({ count, padded, label }: CardsSkeletonProps): react.JSX.Element;
 
 export { CardsSkeleton, type CardsSkeletonProps, PageSkeleton, type PageSkeletonProps };

package/dist/components/page-skeleton.js

@@ -1,10 +1,43 @@
 import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card } from "./card.js";
 import { Skeleton } from "./skeleton.js";
-function PageSkeleton({ rows = 5, padded = true }) {
-  return /* @__PURE__ */ React.createElement("div", { className: `space-y-6 ${padded ? "p-6" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-7 w-48" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-9 w-28" })), /* @__PURE__ */ React.createElement("div", { className: "border border-stroke-default rounded-(--radius-card) overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "bg-surface-raised border-b border-stroke-default px-4 py-3 flex gap-4" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-20" })), Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "px-4 py-3.5 flex gap-4 items-center border-b border-stroke-subtle last:border-0" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-40" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-28" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-16" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-20 ml-auto" })))));
+function PageSkeleton({ rows = 5, padded = true, label = "Carregando\u2026" }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-page-skeleton", padded && "rds-page-skeleton--padded"].filter(Boolean).join(" "), role: "status", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "rds-page-skeleton__heading", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: 192, height: 28 }),
+      /* @__PURE__ */ jsx(Skeleton, { shape: "rect", width: 112, height: 36 })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { as: "div", size: "sm", className: "rds-page-skeleton__table", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rds-page-skeleton__row rds-page-skeleton__row--head", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 128 }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 96 }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 80 })
+      ] }),
+      Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "rds-page-skeleton__row", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 160 }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 112 }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 64 }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 80, className: "rds-page-skeleton__end" })
+      ] }, i))
+    ] })
+  ] });
 }
-function CardsSkeleton({ count = 4, padded = true }) {
-  return /* @__PURE__ */ React.createElement("div", { className: `space-y-6 ${padded ? "p-6" : ""}` }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-7 w-48" }), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4" }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "border border-stroke-default rounded-(--radius-card) p-4 space-y-3" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-8 w-32" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-3 w-20" })))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4" }, Array.from({ length: 2 }).map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "border border-stroke-default rounded-(--radius-card) p-4 space-y-3" }, /* @__PURE__ */ React.createElement(Skeleton, { className: "h-5 w-32" }), /* @__PURE__ */ React.createElement(Skeleton, { className: "h-32 w-full" })))));
+function CardsSkeleton({ count = 4, padded = true, label = "Carregando\u2026" }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-page-skeleton", padded && "rds-page-skeleton--padded"].filter(Boolean).join(" "), role: "status", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: label }),
+    /* @__PURE__ */ jsx(Skeleton, { width: 192, height: 28 }),
+    /* @__PURE__ */ jsx("div", { className: "rds-page-skeleton__grid rds-page-skeleton__grid--stats", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs(Card, { as: "div", size: "sm", className: "rds-page-skeleton__card", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: 96 }),
+      /* @__PURE__ */ jsx(Skeleton, { width: 128, height: 32 }),
+      /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 12 })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "rds-page-skeleton__grid rds-page-skeleton__grid--charts", children: [0, 1].map((i) => /* @__PURE__ */ jsxs(Card, { as: "div", size: "sm", className: "rds-page-skeleton__card", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: 128, height: 20 }),
+      /* @__PURE__ */ jsx(Skeleton, { shape: "rect", height: 128 })
+    ] }, i)) })
+  ] });
 }
 export {
   CardsSkeleton,

package/dist/components/pagination.d.ts

@@ -1,31 +1,41 @@
 import * as react from 'react';
+import { HTMLAttributes, ComponentType, ReactNode } from 'react';
 
-/**
- * Pagination — navegação por páginas em listas longas.
- *
- * Uso:
- *   <Pagination
- *     page={2}
- *     totalPages={10}
- *     onChange={p => setPage(p)}
- *   />
- *
- *   <Pagination page={1} totalPages={20} onChange={...} siblings={2} />
- *
- * Renderiza: Prev | 1 ... 4 5 [6] 7 8 ... 20 | Next
- */
-interface PaginationProps {
+type PaginationLinkComponent = ComponentType<{
+    href: string;
+    className?: string;
+    'aria-label'?: string;
+    'aria-current'?: 'page';
+    children: ReactNode;
+}>;
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** The open page, from 1. */
     page: number;
+    /** How many pages there are. */
     totalPages: number;
-    onChange: (page: number) => void;
-    /** Páginas vizinhas a mostrar de cada lado da atual. default = 1. */
+    /** Buttons: called with the page to open. Leave it out and pass `href` for links. */
+    onChange?: (page: number) => void;
+    /** Links: the address of each page. */
+    href?: (page: number) => string;
+    /** The link element when `href` is given (default `<a>`). Pass a framework Link to navigate on the client. */
+    linkAs?: PaginationLinkComponent;
+    /** The range and the total, on the left ("21–40 de 340"); never hide the total (Figma: `showSummary` + `summary`). */
+    summary?: ReactNode;
+    /** Pages shown on each side of the open one. Default 1. */
     siblings?: number;
-    /** Páginas fixas no início e no fim (sempre visíveis). default = 1. */
+    /** Pages always shown at the start and at the end. Default 1. */
     boundaries?: number;
-    className?: string;
-    /** Esconde quando totalPages <= 1. default = true. */
+    /** Render nothing when there is a single page. Default true. */
     hideOnSinglePage?: boolean;
 }
-declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+type Entry = number | 'ellipsis-start' | 'ellipsis-end';
+/** First and last (`boundaries`), the open page and `siblings` on each side; a gap of one page shows the page, a longer one "…". */
+declare function pageItems(page: number, totalPages: number, siblings?: number, boundaries?: number): Entry[];
+/**
+ * Pagination — Figma [RDS] Navigation/Pagination. To walk a long list one page at a time: a <nav aria-label="Paginação">;
+ * the open page has aria-current="page", every number is named "Página N", previous and next are named and turn
+ * disabled at the ends. Buttons with `onChange`, links with `href`. Styles: pagination.css.
+ */
+declare function Pagination({ page, totalPages, onChange, href, linkAs: Link, summary, siblings, boundaries, hideOnSinglePage, className, ...rest }: PaginationProps): react.JSX.Element | null;
 
-export { Pagination, type PaginationProps };
+export { Pagination, type PaginationLinkComponent, type PaginationProps, pageItems };