@rojaostudio/ds 2.0.0-next.2 → 2.0.0-next.21

package/dist/components/item.d.ts

@@ -1,8 +1,9 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type ItemVariant = 'default' | 'outline' | 'muted';
-type ItemSize = 'default' | 'sm';
+/** The emphasis (Figma: `variant`). */
+type ItemVariant = 'ghost' | 'outline' | 'soft';
+type ItemSize = 'md' | 'sm';
 interface ItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** The thing's name (Figma: `title`). */
     title: ReactNode;
@@ -12,10 +13,16 @@ interface ItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     media?: ReactNode;
     /** One action or control on the right (Figma: `showAction` + `action`): a ghost Button, an IconButton, a Switch. */
     action?: ReactNode;
-    /** default: loose in the list, a line between rows; outline: each row a block; muted: a background, no border. */
-    variant?: ItemVariant;
-    /** sm for dense lists: 14 and 12 text, 8 12 padding. */
-    size?: ItemSize;
+    /**
+     * ghost (default): loose in the list, a line between rows; outline: each row a block; soft: a background, no
+     * border (Figma: `variant`). `'default'` and `'muted'` are deprecated (2.0.0-next): they are ghost and soft.
+     */
+    variant?: ItemVariant | 'default' | 'muted';
+    /**
+     * md (default) or sm for dense lists: 14 and 12 text, 8 12 padding (Figma: `size`). `'default'` is deprecated
+     * (2.0.0-next): it is `'md'`.
+     */
+    size?: ItemSize | 'default';
 }
 /**
  * Item — Figma [RDS] Content/Item. One row of a list: media, title, description and one action. Inside an ItemGroup
@@ -26,7 +33,7 @@ interface ItemGroupProps extends HTMLAttributes<HTMLUListElement> {
     /** The Items. One variant for the whole list. */
     children: ReactNode;
 }
-/** The list the Items go in (<ul>). default rows get a line between them; outline and muted rows a gap of 8. */
+/** The list the Items go in (<ul>). ghost rows get a line between them; outline and soft rows a gap of 8. */
 declare function ItemGroup({ className, children, ...rest }: ItemGroupProps): react.JSX.Element;
 
 export { Item, ItemGroup, type ItemGroupProps, type ItemProps, type ItemSize, type ItemVariant };

package/dist/components/item.js

@@ -6,14 +6,17 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+const LEGACY_VARIANT = { default: "ghost", muted: "soft" };
 const InGroup = createContext(false);
 function Item(_a) {
-  var _b = _a, { title, description, media, action, variant = "default", size = "default", className } = _b, rest = __objRest(_b, ["title", "description", "media", "action", "variant", "size", "className"]);
+  var _b = _a, { title, description, media, action, variant = "ghost", size = "md", className } = _b, rest = __objRest(_b, ["title", "description", "media", "action", "variant", "size", "className"]);
+  var _a2;
   const Root = useContext(InGroup) ? "li" : "div";
+  const look = (_a2 = LEGACY_VARIANT[variant]) != null ? _a2 : variant;
   return /* @__PURE__ */ jsxs(
     Root,
     __spreadProps(__spreadValues({}, rest), {
-      className: ["rds-item", `rds-item--${variant}`, size === "sm" && "rds-item--sm", className].filter(Boolean).join(" "),
+      className: ["rds-item", `rds-item--${look}`, size === "sm" && "rds-item--sm", className].filter(Boolean).join(" "),
       children: [
         media && /* @__PURE__ */ jsx("span", { className: "rds-item__media", children: media }),
         /* @__PURE__ */ jsxs("span", { className: "rds-item__content", children: [

package/dist/components/marker.d.ts

@@ -1,9 +1,17 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
+/** The marker's shape (Figma: `kind`): it is the form, not the emphasis, so it is not a `variant`. */
+type MarkerKind = 'inline' | 'border' | 'separator';
+/** @deprecated Use MarkerKind (2.0.0-next: `variant` is `kind`, and default is inline). */
 type MarkerVariant = 'default' | 'border' | 'separator';
 interface MarkerProps extends HTMLAttributes<HTMLDivElement> {
-    /** default: icon and text; border: with a line under it, to split rows; separator: the text between two lines. */
+    /**
+     * inline (default): icon and text; border: with a line under it, to split rows; separator: the text between two
+     * lines (Figma: `kind`).
+     */
+    kind?: MarkerKind;
+    /** @deprecated Use `kind` (2.0.0-next): default → inline, border and separator stay. */
     variant?: MarkerVariant;
     /** The assistant's status, a system note or a date (Figma: `text`). */
     children: ReactNode;
@@ -19,6 +27,6 @@ interface MarkerProps extends HTMLAttributes<HTMLDivElement> {
  * Marker — Figma [RDS] Chat/Marker. A line inside the conversation that is not a message: the assistant's status
  * ("Buscando…"), a system note or a date between two lines. Styles: marker.css.
  */
-declare function Marker({ variant, children, icon, loading, className, ...rest }: MarkerProps): react.JSX.Element;
+declare function Marker({ kind: kindProp, variant, children, icon, loading, className, ...rest }: MarkerProps): react.JSX.Element;
 
-export { Marker, type MarkerProps, type MarkerVariant };
+export { Marker, type MarkerKind, type MarkerProps, type MarkerVariant };

package/dist/components/marker.js

@@ -7,10 +7,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { SparklesIcon } from "./internal/icons.js";
 import { Spinner } from "./spinner.js";
 function Marker(_a) {
-  var _b = _a, { variant = "default", children, icon = /* @__PURE__ */ jsx(SparklesIcon, {}), loading, className } = _b, rest = __objRest(_b, ["variant", "children", "icon", "loading", "className"]);
-  const classes = ["rds-marker", `rds-marker--${variant}`, className].filter(Boolean).join(" ");
+  var _b = _a, { kind: kindProp, variant, children, icon = /* @__PURE__ */ jsx(SparklesIcon, {}), loading, className } = _b, rest = __objRest(_b, ["kind", "variant", "children", "icon", "loading", "className"]);
+  const kind = kindProp != null ? kindProp : variant === "default" || variant === void 0 ? "inline" : variant;
+  const classes = ["rds-marker", `rds-marker--${kind}`, className].filter(Boolean).join(" ");
   const role = loading ? "status" : void 0;
-  if (variant === "separator") {
+  if (kind === "separator") {
     return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ role }, rest), { className: classes, children: [
       /* @__PURE__ */ jsx("span", { className: "rds-marker__line", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("span", { className: "rds-marker__text", children }),

package/dist/components/number-input.d.ts

@@ -53,7 +53,7 @@ interface NumberInputProps extends Omit<FieldTextProps, 'labelPosition'> {
  * booking, instalments). The number in the middle is typed; the field is a spinbutton, so the arrows move it (Page
  * Up/Down by ten steps, Home/End to the limits) and − and + stay out of the Tab order. At a limit its button turns
  * off. A price, a CPF or a CEP is the Input; a continuous range, the Slider; the steps of a flow, the
- * FloatingStepper. Styles: number-input.css and internal/field.css.
+ * Stepper. Styles: number-input.css and internal/field.css.
  */
 declare function NumberInput({ label, hint, error, errorMessage, required, value, defaultValue, onChange, min, max, step, unit, steps, stepsLabel, debounce, decrementLabel, incrementLabel, name, placeholder, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: NumberInputProps): react.JSX.Element;
 

package/dist/components/progress.d.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 /** task: something moving to the end (upload, import). measure: a value inside a known range (quota used). */
 type ProgressKind = 'task' | 'measure';
-type ProgressSize = 'default' | 'sm';
+type ProgressSize = 'md' | 'sm';
 interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** 0 to `max` (Figma: `value`, 0 to 100 in steps of 5; the code takes any value). */
     value: number;
@@ -18,8 +18,8 @@ interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>
     valueText?: ReactNode;
     /** task → role="progressbar"; measure → role="meter". */
     kind?: ProgressKind;
-    /** default: 8px bar; sm: 4px, for dense lists (Figma: `size`). */
-    size?: ProgressSize;
+    /** md: 8px bar (default); sm: 4px, for dense lists (Figma: `size`). `'default'` is deprecated (2.0.0-next): it is `'md'`. */
+    size?: ProgressSize | 'default';
 }
 /**
  * Progress — Figma [RDS] Indicators/Progress. A bar with a value: the track is the brand tint, the fill the first

package/dist/components/progress.js

@@ -15,7 +15,7 @@ function Progress(_a) {
     showValue = true,
     valueText,
     kind = "task",
-    size = "default",
+    size = "md",
     className
   } = _b, rest = __objRest(_b, [
     "value",
@@ -32,7 +32,7 @@ function Progress(_a) {
   const clamped = Math.min(Math.max(value, 0), max);
   const percent = max > 0 ? clamped / max * 100 : 0;
   const text = valueText != null ? valueText : `${Math.round(percent)}%`;
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-progress", `rds-progress--${size}`, className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-progress", `rds-progress--${size === "default" ? "md" : size}`, className].filter(Boolean).join(" "), children: [
     (showLabel || showValue) && /* @__PURE__ */ jsxs("div", { className: "rds-progress__row", children: [
       showLabel && /* @__PURE__ */ jsx("span", { id: labelId, className: "rds-progress__label", children: label }),
       showValue && /* @__PURE__ */ jsx("span", { className: "rds-progress__value", "aria-hidden": "true", children: text })

package/dist/components/row-actions.d.ts

@@ -4,6 +4,9 @@ import { ReactNode } from 'react';
 interface RowActionItem {
     label: string;
     icon?: ReactNode;
+    /** neutral (default) or danger: danger items go last, after a separator. */
+    tone?: 'neutral' | 'danger';
+    /** @deprecated Use `tone` (2.0.0-next): default → neutral, danger stays. */
     variant?: 'default' | 'danger';
     disabled?: boolean;
     onClick: () => void;

package/dist/components/row-actions.js

@@ -13,10 +13,14 @@ function RowActions({
   items = [],
   dangerSeparator
 }) {
-  const hasDanger = items.some((i) => i.variant === "danger");
+  const isDanger = (i) => {
+    var _a;
+    return ((_a = i.tone) != null ? _a : i.variant) === "danger";
+  };
+  const hasDanger = items.some(isDanger);
   const showSep = dangerSeparator != null ? dangerSeparator : hasDanger;
-  const normalItems = showSep ? items.filter((i) => i.variant !== "danger") : items;
-  const dangerItems = showSep ? items.filter((i) => i.variant === "danger") : [];
+  const normalItems = showSep ? items.filter((i) => !isDanger(i)) : items;
+  const dangerItems = showSep ? items.filter(isDanger) : [];
   return /* @__PURE__ */ jsxs("div", { className: "rds-row-actions", children: [
     primaryHref ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", tone: "neutral", children: /* @__PURE__ */ jsx("a", { href: primaryHref, onClick: (e) => e.stopPropagation(), children: primaryLabel }) }) : primaryOnClick ? /* @__PURE__ */ jsx(
       Button,
@@ -48,7 +52,7 @@ function RowActions({
             DropdownMenuItem,
             {
               icon: item.icon,
-              tone: item.variant,
+              tone: isDanger(item) ? "danger" : "neutral",
               disabled: item.disabled,
               onSelect: item.onClick,
               children: item.label

package/dist/components/saving-bar.d.ts

@@ -21,13 +21,25 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     saveLabel?: string;
     retryLabel?: string;
     discardLabel?: string;
+    /**
+     * Turns the unsaved message into a button that opens what is missing (a Drawer with the checklist), in the
+     * compact arrangement only; expanded, the message stays text (Figma: `showDetails`).
+     */
+    onDetails?: () => void;
+    /** Said after the message in the details button's accessible name, hidden on screen. */
+    detailsLabel?: string;
+    /** Whether the panel the details button opens is open (aria-expanded). */
+    detailsExpanded?: boolean;
+    /** The id of that panel (aria-controls). */
+    detailsControls?: string;
 }
 /**
  * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not
- * saved, and leaves once saved. Painted with colors/primary on purpose: a state that waits for a
- * decision, not a notice. It does not place itself: put it sticky or fixed at the bottom.
- * Its Buttons use the inverse tone, drawn for the colors/primary band in both modes. Styles: saving-bar.css.
+ * saved, and leaves once saved. It is the brand plate on purpose (.ds-plate on the bar, in every brand and in
+ * light or dark alike): a state that waits for a decision, not a notice. It does not place itself: put it
+ * sticky or fixed at the bottom. Its Buttons are Salvar in tone action and Descartar in tone neutral ghost, read
+ * inside the plate. Styles: saving-bar.css.
  */
-declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, className, ...rest }: SavingBarProps): react.JSX.Element;
+declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
 
 export { SavingBar, type SavingBarProps, type SavingBarStatus };

package/dist/components/saving-bar.js

@@ -7,7 +7,7 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
 import { Loader } from "./internal/button.js";
-import { AlertIcon } from "./internal/icons.js";
+import { AlertIcon, ChevronUpIcon } from "./internal/icons.js";
 function SavingBar(_a) {
   var _b = _a, {
     status = "unsaved",
@@ -19,6 +19,10 @@ function SavingBar(_a) {
     saveLabel = "Salvar",
     retryLabel = "Tentar de novo",
     discardLabel = "Descartar",
+    onDetails,
+    detailsLabel = "Ver o que falta",
+    detailsExpanded,
+    detailsControls,
     className
   } = _b, rest = __objRest(_b, [
     "status",
@@ -30,28 +34,52 @@ function SavingBar(_a) {
     "saveLabel",
     "retryLabel",
     "discardLabel",
+    "onDetails",
+    "detailsLabel",
+    "detailsExpanded",
+    "detailsControls",
     "className"
   ]);
   const saving = status === "saving";
   const error = status === "error";
-  return /* @__PURE__ */ jsxs(
+  const text = saving ? savingMessage : error ? errorMessage : message;
+  const details = status === "unsaved" && onDetails !== void 0;
+  return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
-      className: ["rds-savingbar", className].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ jsxs("p", { className: "rds-savingbar__message", role: "status", children: [
+      className: ["rds-savingbar", "ds-plate", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
+        /* @__PURE__ */ jsxs("p", { className: ["rds-savingbar__message", details && "rds-savingbar__message--details"].filter(Boolean).join(" "), role: "status", children: [
           saving && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon rds-savingbar__loader", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader, {}) }),
           error && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertIcon, {}) }),
-          /* @__PURE__ */ jsx("span", { children: saving ? savingMessage : error ? errorMessage : message })
+          /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: text }),
+          details && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "rds-savingbar__details",
+              "aria-expanded": detailsExpanded != null ? detailsExpanded : false,
+              "aria-controls": detailsControls,
+              onClick: onDetails,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: text }),
+                /* @__PURE__ */ jsxs("span", { className: "rds-visually-hidden", children: [
+                  ", ",
+                  detailsLabel
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
-          onDiscard && /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
-          /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
+          onDiscard && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
+          /* @__PURE__ */ jsx(Button, { tone: "action", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
         ] })
-      ]
+      ] })
     })
   );
 }

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

@@ -6,12 +6,13 @@ import { ReactNode } from 'react';
  * title, kept because SettingsList composes it and the products still use it. New code uses
  * `<PageHeader titleAs="h2" title description actions />`.
  *
- * action → actions. eyebrow and number (not in the Figma) still render as a line above the title. Styles: section-header.css.
+ * action → actions. eyebrow and number are deprecated (not in the Figma); they still render as a line above the
+ * title. Styles: section-header.css.
  */
 interface SectionHeaderProps {
-    /** Small uppercase line above the title (overline). */
+    /** @deprecated Not in the Figma [RDS] (the SectionHeader pattern): a small uppercase line above the title. */
     eyebrow?: string;
-    /** Section or step number, before the eyebrow: "02 · CONTEÚDO". */
+    /** @deprecated Not in the Figma [RDS]: the section or step number, before the eyebrow ("02 · CONTEÚDO"). */
     number?: string;
     title: string;
     description?: string;

package/dist/components/selectable-card.d.ts

@@ -5,22 +5,14 @@ import { ReactNode } from 'react';
 interface SelectableCardProps {
     selected?: boolean;
     onClick?: () => void;
-    /** Ignored: the card is a radio now, never a link. */
-    as?: 'button' | 'a';
-    /** Ignored: the card is a radio now, never a link. */
-    href?: string;
-    /** Ignored: the ChoiceCard row always shows its radio. */
-    indicator?: 'radio' | 'check' | 'chevron' | 'none';
-    /** Ignored: the ChoiceCard has no ribbon. */
-    ribbon?: ReactNode;
     disabled?: boolean;
     className?: string;
     children: ReactNode;
 }
 /**
  * @deprecated Use ChoiceCard (Figma [RDS] Content/ChoiceCard, layout="row"). A thin wrapper over it: `children`
- * is the label, `onClick` is `onSelect`. It is a native radio now, not a button: `as`, `href`, `indicator` and
- * `ribbon` are ignored, and a chosen card cannot be un-chosen by clicking it again.
+ * is the label, `onClick` is `onSelect`. It is a native radio now, not a button (`as`, `href`, `indicator` and
+ * `ribbon` left in 2.0), and a chosen card cannot be un-chosen by clicking it again.
  */
 declare function SelectableCard({ selected, onClick, disabled, className, children }: SelectableCardProps): react.JSX.Element;
 

package/dist/components/sidebar.d.ts

@@ -1,7 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, MouseEventHandler } from 'react';
 
-type SidebarTone = 'light' | 'dark';
 type SidebarHeader = 'mark' | 'logo';
 interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /**
@@ -19,11 +18,6 @@ interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     user?: ReactNode;
     /** 64 wide with only the icons, for a tablet; each entry keeps its name and shows it in a Tooltip. */
     collapsed?: boolean;
-    /**
-     * light (default) or dark (colors/primary; the active entry stays the light pill). dark is deprecated in the
-     * Figma since 27/09/2026: for the brand colour, put the Sidebar in a brand-mode scope and keep light.
-     */
-    tone?: SidebarTone;
     /** The entries (Figma: the `items` slot): SidebarItem, SidebarSection, SidebarSeparator. */
     children: ReactNode;
     /** The foot, under the user: usually the "Sair" SidebarItem. */
@@ -32,9 +26,10 @@ interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
 /**
  * Sidebar — Figma [RDS] Navigation/Sidebar. The product's main navigation, fixed on the left: a <nav> named
  * "Navegação principal" (override with aria-label) with a list; the current entry has aria-current="page".
- * Styles: sidebar.css.
+ * The theme is not a prop: the Sidebar follows its container. For the brand-coloured bar (the old `tone="dark"`),
+ * put it inside a `.ds-plate` (the brand mode); for the dark theme, inside `.dark`. Styles: sidebar.css.
  */
-declare function Sidebar({ header, logo, mark, module, user, collapsed, tone, children, footer, className, ...rest }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ header, logo, mark, module, user, collapsed, children, footer, className, ...rest }: SidebarProps): react.JSX.Element;
 interface SidebarItemProps {
     /**
      * The entry's name (Figma: `label`). Collapsed, it stays as the accessible name and shows in a Tooltip. With
@@ -46,7 +41,9 @@ interface SidebarItemProps {
     /** A link: where the entry leads. Without `href` nor `asChild`, the entry is a button (Sair). */
     href?: string;
     onClick?: MouseEventHandler<HTMLElement>;
-    /** The current page (Figma: `state=active`): aria-current="page". Only one at a time. */
+    /** The current page (Figma: `current`): aria-current="page". Only one at a time. */
+    current?: boolean;
+    /** @deprecated Use `current` (2.0.0-next). */
     active?: boolean;
     /** A number on the right, such as pending items (Figma: `showCount` + `count`). Hidden when collapsed. */
     count?: number | string;
@@ -54,7 +51,7 @@ interface SidebarItemProps {
     asChild?: boolean;
 }
 /** One entry (Figma: .sidebar/item): 44 tall, icon of 20. */
-declare function SidebarItem({ children, icon, href, onClick, active, count, asChild }: SidebarItemProps): react.JSX.Element;
+declare function SidebarItem({ children, icon, href, onClick, current, active, count, asChild }: SidebarItemProps): react.JSX.Element;
 interface SidebarSectionProps {
     /** The group's name ("Atendimento") (Figma: .sidebar/section `label`). */
     label: string;
@@ -76,4 +73,4 @@ declare function SidebarSection({ label, children, count, open: openProp, defaul
 /** The line between groups of entries. */
 declare function SidebarSeparator(): react.JSX.Element;
 
-export { Sidebar, type SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarSeparator, type SidebarTone };
+export { Sidebar, type SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarSeparator };

package/dist/components/sidebar.js

@@ -26,7 +26,6 @@ function Sidebar(_a) {
     module,
     user,
     collapsed = false,
-    tone = "light",
     children,
     footer,
     className
@@ -37,7 +36,6 @@ function Sidebar(_a) {
     "module",
     "user",
     "collapsed",
-    "tone",
     "children",
     "footer",
     "className"
@@ -48,7 +46,7 @@ function Sidebar(_a) {
     __spreadProps(__spreadValues({
       "aria-label": "Navega\xE7\xE3o principal"
     }, rest), {
-      className: ["rds-sidebar", tone === "dark" && "rds-sidebar--dark", collapsed && "rds-sidebar--collapsed", className].filter(Boolean).join(" "),
+      className: ["rds-sidebar", collapsed && "rds-sidebar--collapsed", className].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsx("div", { className: "rds-sidebar__header", children: header === "logo" ? /* @__PURE__ */ jsx("span", { className: "rds-sidebar__logo", children: logo }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "rds-sidebar__mark", "aria-hidden": "true", children: mark != null ? mark : /* @__PURE__ */ jsx(Avatar, { type: "brand", size: "sm", fallbackText: module == null ? void 0 : module.charAt(0).toUpperCase() }) }),
@@ -63,7 +61,8 @@ function Sidebar(_a) {
     })
   ) });
 }
-function SidebarItem({ children, icon, href, onClick, active, count, asChild }) {
+function SidebarItem({ children, icon, href, onClick, current, active, count, asChild }) {
+  const isCurrent = current != null ? current : active;
   const { collapsed } = useContext(SidebarContext);
   const link = asChild && isValidElement(children) ? children : null;
   const label = link ? link.props.children : children;
@@ -72,7 +71,7 @@ function SidebarItem({ children, icon, href, onClick, active, count, asChild })
     /* @__PURE__ */ jsx("span", { className: collapsed ? "rds-visually-hidden" : "rds-sidebar__label", children: label }),
     count !== void 0 && !collapsed && /* @__PURE__ */ jsx("span", { className: "rds-sidebar__count", children: count })
   ] });
-  const common = { "aria-current": active ? "page" : void 0, onClick };
+  const common = { "aria-current": isCurrent ? "page" : void 0, onClick };
   const entry = link ? cloneElement(link, __spreadProps(__spreadValues({}, common), {
     className: ["rds-sidebar__item", link.props.className].filter(Boolean).join(" "),
     children: content

package/dist/components/spinner.d.ts

@@ -1,13 +1,16 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
 
-type SpinnerSize = 'sm' | 'default' | 'lg';
-type SpinnerTone = 'default' | 'inverse';
+type SpinnerSize = 'sm' | 'md' | 'lg';
+type SpinnerTone = 'neutral' | 'inverse';
 interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
-    /** sm 16 (inside a button or field), default 24 (next to text), lg 32 (alone in an empty area). */
-    size?: SpinnerSize;
-    /** default on light surfaces; inverse on the dark brand band or a dark veil. */
-    tone?: SpinnerTone;
+    /** sm 16 (inside a button or field), md 24 (next to text, the default), lg 32 (alone in an empty area). `'default'` is deprecated (2.0.0-next): it is `'md'`. */
+    size?: SpinnerSize | 'default';
+    /**
+     * neutral (default) on light surfaces; inverse on the dark brand band or a dark veil (Figma: `tone`). `'default'`
+     * is deprecated (2.0.0-next): it is `'neutral'`.
+     */
+    tone?: SpinnerTone | 'default';
     /** What is happening (Figma: `label`). Always the accessible name; shown next to the ring with `showLabel`. */
     label?: string;
     /** Show the label next to the ring (Figma: `showLabel`). */

package/dist/components/spinner.js

@@ -6,8 +6,8 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 function Spinner(_a) {
   var _b = _a, {
-    size = "default",
-    tone = "default",
+    size = "md",
+    tone = "neutral",
     label = "Carregando\u2026",
     showLabel = false,
     className
@@ -23,7 +23,7 @@ function Spinner(_a) {
     __spreadProps(__spreadValues({}, rest), {
       role: "status",
       "aria-label": showLabel ? void 0 : label,
-      className: ["rds-spinner", `rds-spinner--${size}`, `rds-spinner--${tone}`, className].filter(Boolean).join(" "),
+      className: ["rds-spinner", `rds-spinner--${size === "default" ? "md" : size}`, `rds-spinner--${tone === "default" ? "neutral" : tone}`, className].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsxs("svg", { className: "rds-spinner__ring", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx("circle", { className: "rds-spinner__track", cx: "12", cy: "12", r: "10.5", fill: "none", strokeWidth: "3" }),

package/dist/components/star-rating.d.ts

@@ -1,12 +1,12 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type StarRatingSize = 'sm' | 'default' | 'lg';
+type StarRatingSize = 'sm' | 'md' | 'lg';
 interface StarRatingProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** 0 to 5, rounded to the nearest half (Figma: `value`). */
     value: number;
-    /** sm: 16 stars and 12 text; default: 20 and 14; lg: 24 and 14 (Figma: `size`). */
-    size?: StarRatingSize;
+    /** sm: 16 stars and 12 text; md (default): 20 and 14; lg: 24 and 14 (Figma: `size`). `'default'` is deprecated (2.0.0-next): it is `'md'`. */
+    size?: StarRatingSize | 'default';
     /**
      * The written grade, such as the value and how many reviews (Figma: `showLabel` + `label`): "4,5 (128
      * avaliações)". Show it: the yellow star alone has too little contrast to be the only cue.

package/dist/components/star-rating.js

@@ -7,9 +7,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { StarFilledIcon, StarIcon } from "./internal/icons.js";
 const format = (n) => n.toLocaleString("pt-BR", { maximumFractionDigits: 1 });
 function StarRating(_a) {
-  var _b = _a, { value, size = "default", label, className } = _b, rest = __objRest(_b, ["value", "size", "label", "className"]);
+  var _b = _a, { value, size = "md", label, className } = _b, rest = __objRest(_b, ["value", "size", "label", "className"]);
   const rounded = Math.round(Math.min(Math.max(value, 0), 5) * 2) / 2;
-  return /* @__PURE__ */ jsxs("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-rating", `rds-rating--${size}`, className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-rating", `rds-rating--${size === "default" ? "md" : size}`, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx("span", { className: "rds-rating__stars", role: "img", "aria-label": `Nota ${format(rounded)} de 5`, children: [1, 2, 3, 4, 5].map((i) => {
       const fill = rounded >= i ? "full" : rounded >= i - 0.5 ? "half" : "empty";
       return /* @__PURE__ */ jsxs("span", { className: `rds-rating__star rds-rating__star--${fill}`, "aria-hidden": "true", children: [

package/dist/components/stat.d.ts

@@ -1,15 +1,27 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-/** What the number means: money in (positive), a loss or a lack (negative), a counter that asks for attention, zero. */
-type StatTone = 'default' | 'positive' | 'negative' | 'warning' | 'muted';
+/**
+ * What the number means (Figma: `tone`): neutral (default), money in (success), a loss or a lack (danger), a counter
+ * that asks for attention (warning).
+ */
+type StatTone = 'neutral' | 'success' | 'danger' | 'warning';
+/** 2.0.0-next names, deprecated: default → neutral, positive → success, negative → danger. */
+type LegacyStatTone = 'default' | 'positive' | 'negative';
+/** The tone with the deprecated names mapped. */
+declare function statTone(tone: StatTone | LegacyStatTone): StatTone;
 interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** What is counted (Figma: `label`): "Pedidos no mês". */
     label: ReactNode;
     /** The number, already formatted by the caller (Figma: `value`): "1.284", "R$ 48.320". */
     value: ReactNode;
-    /** Paints the number (Figma: `tone`). */
-    tone?: StatTone;
+    /**
+     * Paints the number (Figma: `tone`). `'default'`, `'positive'` and `'negative'` are deprecated (2.0.0-next): they
+     * are neutral, success and danger.
+     */
+    tone?: StatTone | LegacyStatTone;
+    /** A zero, nothing to see: the number in the muted colour (Figma: `muted`), over the neutral tone. */
+    muted?: boolean;
     /** A line under the number (Figma: `showCaption` + `caption`): "vs. 1.142 em agosto". */
     caption?: ReactNode;
     /** The change, a Delta beside the number (Figma: `showDelta` + the exposed Delta). */
@@ -28,6 +40,6 @@ declare const StatFramedDefault: react.Context<boolean>;
  * Stat — Figma [RDS] Content/Stat. A number that matters, with its label, the change (Delta) and, when it helps,
  * the trend (Sparkline). Alone it is a card; in a SummaryBar it is a cell. Styles: stat.css.
  */
-declare function Stat({ label, value, tone, caption, delta, sparkline, framed, className, ...rest }: StatProps): react.JSX.Element;
+declare function Stat({ label, value, tone, muted, caption, delta, sparkline, framed, className, ...rest }: StatProps): react.JSX.Element;
 
-export { Stat, StatFramedDefault, type StatProps, type StatTone };
+export { type LegacyStatTone, Stat, StatFramedDefault, type StatProps, type StatTone, statTone };

package/dist/components/stat.js

@@ -6,12 +6,17 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+const LEGACY_TONE = { default: "neutral", positive: "success", negative: "danger" };
+function statTone(tone) {
+  var _a;
+  return (_a = LEGACY_TONE[tone]) != null ? _a : tone;
+}
 const StatFramedDefault = createContext(true);
 function Stat(_a) {
-  var _b = _a, { label, value, tone = "default", caption, delta, sparkline, framed, className } = _b, rest = __objRest(_b, ["label", "value", "tone", "caption", "delta", "sparkline", "framed", "className"]);
+  var _b = _a, { label, value, tone = "neutral", muted = false, caption, delta, sparkline, framed, className } = _b, rest = __objRest(_b, ["label", "value", "tone", "muted", "caption", "delta", "sparkline", "framed", "className"]);
   const framedDefault = useContext(StatFramedDefault);
   const isFramed = framed != null ? framed : framedDefault;
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-stat", `rds-stat--${tone}`, isFramed && "rds-stat--framed", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-stat", `rds-stat--${statTone(tone)}`, muted && "rds-stat--muted", isFramed && "rds-stat--framed", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsxs("div", { className: "rds-stat__pair", children: [
       /* @__PURE__ */ jsx("span", { className: "rds-stat__label", children: label }),
       /* @__PURE__ */ jsxs("span", { className: "rds-stat__row", children: [
@@ -25,5 +30,6 @@ function Stat(_a) {
 }
 export {
   Stat,
-  StatFramedDefault
+  StatFramedDefault,
+  statTone
 };