@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/option-tile.d.ts

@@ -1,45 +1,41 @@
 import * as react from 'react';
-import { ReactNode, KeyboardEvent } from 'react';
-import { LucideIcon } from 'lucide-react';
+import { ReactNode, KeyboardEvent, ComponentType } from 'react';
 
-/**
- * OptionTile / OptionTileGrid — grade de escolha única (onboarding #449).
- *
- * MESMA FAMÍLIA visual do ChoiceCard (os dois single-choice): casca idle suave
- * (borda 1px border-default, hover border-strong) e selecionado = fill SÓLIDO
- * derivado da camada semântica de seleção (--selection-fill-active). Baixa visão:
- * a seleção é distinguível por mais que cor — fill de alto contraste + check
- * redundante (badge on-fill, glifo fill), nunca só um realce sutil. Todo conteúdo
- * sobre o fill ativo usa tokens de contraste próprios (*-active → on-fill), nunca
- * os tokens de superfície clara.
- *
- * Acessibilidade: OptionTileGrid é um radiogroup com roving tabindex — só um tile é
- * tabbable; setas movem foco E seleção (padrão ARIA), Home/End vão às pontas.
- */
+/** @deprecated Use ChoiceCardProps. */
 interface OptionTileProps {
     selected: boolean;
     label: string;
     onClick: () => void;
     icon?: ReactNode;
     disabled?: boolean;
+    /** true: a checkbox (several chosen); false: a radio (one at a time). */
     multiple?: boolean;
     tabIndex?: number;
+    /** Ignored: the native radio handles the keyboard. */
     onKeyDown?: (e: KeyboardEvent<HTMLButtonElement>) => void;
+    /** Ignored: the control is an <input>, not a <button>. */
     buttonRef?: (el: HTMLButtonElement | null) => void;
+    /** Takes the whole line of the grid. */
     fullSpan?: boolean;
     className?: string;
 }
-declare function OptionTile({ selected, label, onClick, icon, disabled, multiple, tabIndex, onKeyDown, buttonRef, fullSpan, className, }: OptionTileProps): react.JSX.Element;
+/**
+ * @deprecated Use ChoiceCard with layout="tile" (Figma [RDS] Content/ChoiceCard). A thin wrapper over it: `label` is
+ * the children, `onClick` is `onSelect`. A native radio (a checkbox with `multiple`), no longer a button.
+ */
+declare function OptionTile({ selected, label, onClick, icon, disabled, multiple, tabIndex, fullSpan, className }: OptionTileProps): react.JSX.Element;
+/** @deprecated Use ChoiceCardGroup's items. */
 interface OptionTileItem<T extends string = string> {
     value: T;
     label: string;
-    icon?: LucideIcon;
+    /** An icon component (lucide or your own); absent, the tile is text only. */
+    icon?: ComponentType;
     fullSpan?: boolean;
 }
 interface OptionTileGridBase<T extends string = string> {
     label?: ReactNode;
     options: OptionTileItem<T>[];
-    /** 2 = sempre 2 colunas; 3 = 2 no mobile, 3 no >= sm. default 3. */
+    /** Ignored: the grid fits as many 160 cells as the width allows. */
     columns?: 2 | 3;
     className?: string;
     'aria-label'?: string;
@@ -54,7 +50,12 @@ type OptionTileGridMulti<T extends string = string> = OptionTileGridBase<T> & {
     value: T[];
     onChange: (value: T[]) => void;
 };
+/** @deprecated Use ChoiceCardGroupProps. */
 type OptionTileGridProps<T extends string = string> = OptionTileGridSingle<T> | OptionTileGridMulti<T>;
+/**
+ * @deprecated Use ChoiceCardGroup with layout="tile". A thin wrapper over it: `label` (or `aria-label`) is the legend.
+ * With `multiple` the tiles are checkboxes, each toggling its value in the list.
+ */
 declare function OptionTileGrid<T extends string = string>(props: OptionTileGridProps<T>): react.JSX.Element;
 
 export { OptionTile, OptionTileGrid, type OptionTileGridProps, type OptionTileItem, type OptionTileProps };

package/dist/components/option-tile.js

@@ -1,148 +1,63 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsxs(
-    "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(" "),
-      children: [
-        selected && /* @__PURE__ */ jsx("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)]", children: /* @__PURE__ */ jsx(Check, { size: 11, strokeWidth: 3 }) }),
-        icon && /* @__PURE__ */ jsx(
-          "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(" "),
-            children: icon
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: [
-              icon ? "text-caption" : "text-label",
-              "font-semibold leading-tight",
-              selected ? "[color:var(--option-tile-label-active)]" : "[color:var(--option-tile-label)]"
-            ].join(" "),
-            children: 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);
-    }
+  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 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);
-  };
-  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__ */ jsx(
-    "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(" "),
-      children: options.map((opt, i) => {
-        const Icon = opt.icon;
-        return /* @__PURE__ */ jsx(
-          OptionTile,
-          {
-            multiple,
-            selected: isSel(opt.value),
-            label: opt.label,
-            icon: Icon ? /* @__PURE__ */ jsx(Icon, {}) : 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;
-            }
-          },
-          opt.value
-        );
-      })
-    }
-  );
-  if (!label) return grid;
-  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-2", className].join(" "), children: [
-    /* @__PURE__ */ jsx("span", { className: "text-label font-medium text-fg-primary", children: label }),
-    grid
-  ] });
+  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
+      );
+    }) });
+  }
+  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,40 +1,14 @@
 import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsx(
-    "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__ */ jsxs("div", { className: ["flex items-start justify-between gap-4 mb-6", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-      eyebrow && /* @__PURE__ */ jsx("p", { className: "text-caption font-medium text-fg-muted mb-1", children: eyebrow }),
-      /* @__PURE__ */ jsx("h1", { className: "text-heading-md font-semibold text-fg-primary truncate", children: title })
-    ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: 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__ */ jsx("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,38 +1,41 @@
 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__ */ jsxs("div", { className: `space-y-6 ${padded ? "p-6" : ""}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-48" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-28" })
+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("div", { className: "border border-stroke-default rounded-(--radius-card) overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bg-surface-raised border-b border-stroke-default px-4 py-3 flex gap-4", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" })
+    /* @__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 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "px-4 py-3.5 flex gap-4 items-center border-b border-stroke-subtle last:border-0", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20 ml-auto" })
+      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__ */ jsxs("div", { className: `space-y-6 ${padded ? "p-6" : ""}`, children: [
-    /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-48" }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "border border-stroke-default rounded-(--radius-card) p-4 space-y-3", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-32" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+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: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: Array.from({ length: 2 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "border border-stroke-default rounded-(--radius-card) p-4 space-y-3", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })
+    /* @__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)) })
   ] });
 }

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