@rojaostudio/ds 2.0.0-next.3 → 2.0.0-next.30

package/dist/components/internal/icons.js

@@ -260,6 +260,18 @@ function PencilIcon() {
 function SlidersIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4" }) });
 }
+function SquareIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }) });
+}
+function RectangleVerticalIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("rect", { width: "12", height: "20", x: "6", y: "2", rx: "2" }) });
+}
+function RectangleHorizontalIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("rect", { width: "20", height: "12", x: "2", y: "6", rx: "2" }) });
+}
+function SquareDashedIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M5 3a2 2 0 0 0-2 2M19 3a2 2 0 0 1 2 2M21 19a2 2 0 0 1-2 2M5 21a2 2 0 0 1-2-2M9 3h1M9 21h1M14 3h1M14 21h1M3 9v1M21 9v1M3 14v1M21 14v1" }) });
+}
 export {
   AlertIcon,
   ArrowDownIcon,
@@ -299,6 +311,8 @@ export {
   PhoneIcon,
   PlusIcon,
   QuoteIcon,
+  RectangleHorizontalIcon,
+  RectangleVerticalIcon,
   ReplyIcon,
   RotateCcwIcon,
   SearchIcon,
@@ -306,6 +320,8 @@ export {
   SlidersIcon,
   SmileIcon,
   SparklesIcon,
+  SquareDashedIcon,
+  SquareIcon,
   StarFilledIcon,
   StarIcon,
   TableIcon,

package/dist/components/internal/menu.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-type MenuItemTone = 'default' | 'danger';
+/** neutral (default) or danger (Figma: `tone`). */
+type MenuItemTone = 'neutral' | 'danger';
 interface MenuItemContentProps {
     /** The action, a verb ("Duplicar") (Figma: `label`). */
     children: ReactNode;
@@ -10,7 +11,7 @@ interface MenuItemContentProps {
     /** A keyboard shortcut shown on the right (Figma: `showShortcut`), such as "Ctrl D". Not announced. */
     shortcut?: ReactNode;
 }
-declare const menuItemClassName: (tone?: MenuItemTone, extra?: string) => string;
+declare const menuItemClassName: (tone?: MenuItemTone | "default", extra?: string) => string;
 declare function MenuItemContent({ children, icon, shortcut }: MenuItemContentProps): react.JSX.Element;
 
 export { MenuItemContent, type MenuItemContentProps, type MenuItemTone, menuItemClassName };

package/dist/components/internal/menu.js

@@ -1,6 +1,6 @@
 import "../../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const menuItemClassName = (tone = "default", extra) => ["rds-menu__item", tone === "danger" && "rds-menu__item--danger", extra].filter(Boolean).join(" ");
+const menuItemClassName = (tone = "neutral", extra) => ["rds-menu__item", tone === "danger" && "rds-menu__item--danger", extra].filter(Boolean).join(" ");
 function MenuItemContent({ children, icon, shortcut }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "rds-menu__icon", "aria-hidden": "true", children: icon }),

package/dist/components/internal/modal.js

@@ -4,6 +4,7 @@ import {
   __spreadValues
 } from "../../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Button } from "../button.js";
 import { IconButton } from "../icon-button.js";
@@ -32,6 +33,7 @@ function ModalShell({
   container,
   className
 }) {
+  const opener = useRef(null);
   const cancel = /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "outline", children: cancelLabel }) }, "cancel");
   const confirm = /* @__PURE__ */ jsx(Button, { onClick: onConfirm, children: confirmLabel }, "confirm");
   const actions = footer != null ? footer : confirmLabel ? stackedFooter ? [confirm, cancel] : [cancel, confirm] : null;
@@ -51,6 +53,7 @@ function ModalShell({
           className: ["rds-modal", prefix, ...modifiers, className].filter(Boolean).join(" "),
           style: boxStyle,
           onOpenAutoFocus: (event) => {
+            opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
             const box = event.currentTarget;
             const first = box.querySelector(
               '.rds-modal__body :is(input, textarea, select, button, a[href], [tabindex]:not([tabindex="-1"])):not(:disabled)'
@@ -59,6 +62,12 @@ function ModalShell({
               event.preventDefault();
               first.focus();
             }
+          },
+          onCloseAutoFocus: (event) => {
+            var _a;
+            if (trigger || !((_a = opener.current) == null ? void 0 : _a.isConnected)) return;
+            event.preventDefault();
+            opener.current.focus();
           }
         }, description ? {} : { "aria-describedby": void 0 }), {
           children: [

package/dist/components/internal/toggle.d.ts

@@ -1,4 +1,4 @@
-/** Figma calls this property `style`: ghost in a toolbar, outline when it stands alone. */
+/** The emphasis (Figma: `variant`): ghost in a toolbar, outline when it stands alone. */
 type ToggleVariant = 'ghost' | 'outline';
 declare function toggleClassName(variant: ToggleVariant, extra?: string): string;
 /** A toggle without visible text needs a name, or a screen reader only says "toggle button". */

package/dist/components/internal/use-on-screen-keyboard.d.ts

@@ -0,0 +1,12 @@
+/** Whether focusing this element brings up the on-screen keyboard: a text field, a text area or contenteditable. */
+declare function isEditable(el: Element | null): boolean;
+/**
+ * Whether the phone's on-screen keyboard is open: compact screen (below 1024), an editable field focused, and the
+ * visible area (visualViewport, scaled back from a pinch zoom) well short of the layout viewport. For the bars at the
+ * foot of the screen (FormActions, SavingBar), which leave while it is open so they do not cover the field being
+ * typed in. Without visualViewport (old browsers) or on the server it is always false: the bar stays.
+ * `enabled` false skips the listeners (a layout that does not sit at the foot).
+ */
+declare function useOnScreenKeyboard(enabled?: boolean): boolean;
+
+export { isEditable, useOnScreenKeyboard };

package/dist/components/internal/use-on-screen-keyboard.js

@@ -0,0 +1,49 @@
+"use client";
+import "../../chunk-ORMEWXMH.js";
+import { useEffect, useState } from "react";
+const COMPACT = "(max-width: 1023px)";
+const KEYBOARD_RATIO = 0.75;
+const NO_KEYBOARD = /* @__PURE__ */ new Set(["button", "checkbox", "color", "file", "hidden", "image", "radio", "range", "reset", "submit"]);
+function isEditable(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  if (el.isContentEditable) return true;
+  if (el instanceof HTMLTextAreaElement) return !el.readOnly && !el.disabled;
+  if (el instanceof HTMLInputElement) return !NO_KEYBOARD.has(el.type) && !el.readOnly && !el.disabled;
+  return false;
+}
+function useOnScreenKeyboard(enabled = true) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!enabled || !viewport || typeof window.matchMedia !== "function") {
+      setOpen(false);
+      return;
+    }
+    const compact = window.matchMedia(COMPACT);
+    let frame = 0;
+    const measure = () => compact.matches && isEditable(document.activeElement) && viewport.height * viewport.scale < window.innerHeight * KEYBOARD_RATIO;
+    const check = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setOpen(measure()));
+    };
+    check();
+    viewport.addEventListener("resize", check);
+    window.addEventListener("resize", check);
+    document.addEventListener("focusin", check);
+    document.addEventListener("focusout", check);
+    compact.addEventListener("change", check);
+    return () => {
+      cancelAnimationFrame(frame);
+      viewport.removeEventListener("resize", check);
+      window.removeEventListener("resize", check);
+      document.removeEventListener("focusin", check);
+      document.removeEventListener("focusout", check);
+      compact.removeEventListener("change", check);
+    };
+  }, [enabled]);
+  return enabled && open;
+}
+export {
+  isEditable,
+  useOnScreenKeyboard
+};

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/loading-overlay.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface LoadingOverlayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The action is running (Figma: `open`, code only). The overlay shows only if it is still true after `delay`:
+     * if the next page opens first, it never shows.
+     */
+    open: boolean;
+    /** What is happening, in the gerund with its object: "Criando o produto…" (Figma: `label`). It is the dialog's name and is said once (aria-live="polite"). */
+    label?: string;
+    /**
+     * How long (ms) `open` has to stay true before the overlay shows. Up to it, the wait is the main button in
+     * loading (`<Button loading>`, or the SavingBar in `status="saving"`); past it, the overlay comes in and stays
+     * until the other page opens. 400 by default; 0 shows it at once.
+     */
+    delay?: number;
+    /** Where the portal goes (default: document.body). Inside a `.ds-plate`, for example, to read the brand mode. */
+    container?: HTMLElement | null;
+}
+/**
+ * LoadingOverlay — Figma [RDS] Overlays/LoadingOverlay. The long wait of an action that leads to another page
+ * (create the product and land on its editing). A veil over the whole screen (loading-overlay/scrim) and, in the
+ * middle, a panel (loading-overlay/background, radius/container, elevation/modal) with the Spinner lg and one line
+ * saying what is happening. Styles: loading-overlay.css.
+ *
+ * Time: up to `delay` (~400 ms) only the main button is in loading ("Criando…", aria-busy on the button); past it,
+ * the overlay shows, and it stays until the other page opens. If the navigation comes first, it never shows. Do not
+ * use it for short waits (it only flashes), to load a page or a list (PageSkeleton), for a measured wait (Progress),
+ * or to save without changing page (the SavingBar in `status="saving"`). Never two indicators: with the overlay,
+ * the SavingBar keeps only its button in loading.
+ *
+ * Error: the app sets `open={false}` (the overlay leaves and the focus goes back to where it was, the main button)
+ * and returns the error to the SavingBar in `status="error"`, with the form untouched.
+ *
+ * Accessibility: role="dialog" aria-modal="true" named by `label`; the focus goes to the panel (tabindex=-1) and
+ * stays there; Escape does not close it (the action is running). While it is shown, the rest of the page is
+ * `inert` and `aria-busy="true"` (put back on close). The label is in an aria-live="polite" region. With
+ * prefers-reduced-motion: reduce, no fade, and the Spinner turns slowly (3 s a turn).
+ */
+declare function LoadingOverlay({ open, label, delay, container, className, ...rest }: LoadingOverlayProps): react.ReactPortal | null;
+
+export { LoadingOverlay, type LoadingOverlayProps };

package/dist/components/loading-overlay.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Spinner } from "./spinner.js";
+function isolate(keep) {
+  const marked = [];
+  for (let node = keep; node && node !== document.body && node.parentElement; node = node.parentElement) {
+    for (const sibling of node.parentElement.children) {
+      if (sibling === node || sibling.hasAttribute("inert") || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sibling.tagName)) continue;
+      marked.push({ el: sibling, inert: sibling.getAttribute("inert"), busy: sibling.getAttribute("aria-busy") });
+      sibling.setAttribute("inert", "");
+      sibling.setAttribute("aria-busy", "true");
+    }
+  }
+  return marked;
+}
+function restore(marked) {
+  for (const { el, inert, busy } of marked) {
+    if (inert === null) el.removeAttribute("inert");
+    else el.setAttribute("inert", inert);
+    if (busy === null) el.removeAttribute("aria-busy");
+    else el.setAttribute("aria-busy", busy);
+  }
+}
+function LoadingOverlay(_a) {
+  var _b = _a, { open, label = "Carregando\u2026", delay = 400, container, className } = _b, rest = __objRest(_b, ["open", "label", "delay", "container", "className"]);
+  const [shown, setShown] = useState(false);
+  const veil = useRef(null);
+  const panel = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      setShown(false);
+      return;
+    }
+    if (delay <= 0) {
+      setShown(true);
+      return;
+    }
+    const timer = setTimeout(() => setShown(true), delay);
+    return () => clearTimeout(timer);
+  }, [open, delay]);
+  useLayoutEffect(() => {
+    if (!shown || !veil.current || !panel.current) return;
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const marked = isolate(veil.current);
+    const box = panel.current;
+    box.focus({ preventScroll: true });
+    const keep = (event) => {
+      if (!box.contains(event.target)) box.focus({ preventScroll: true });
+    };
+    document.addEventListener("focusin", keep);
+    return () => {
+      document.removeEventListener("focusin", keep);
+      restore(marked);
+      if (previous == null ? void 0 : previous.isConnected) previous.focus({ preventScroll: true });
+    };
+  }, [shown]);
+  if (!shown || typeof document === "undefined") return null;
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" || event.key === "Tab") {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), { ref: veil, className: ["rds-loading-overlay", className].filter(Boolean).join(" "), onKeyDown, children: /* @__PURE__ */ jsxs("div", { ref: panel, className: "rds-loading-overlay__panel", role: "dialog", "aria-modal": "true", "aria-label": label, tabIndex: -1, children: [
+      /* @__PURE__ */ jsx(Spinner, { size: "lg", tone: "neutral", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("p", { className: "rds-loading-overlay__label", "aria-live": "polite", children: label })
+    ] }) })),
+    container != null ? container : document.body
+  );
+}
+export {
+  LoadingOverlay
+};

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

@@ -1,33 +1,59 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { BottomBarPlacement } from './internal/bottom-bar.js';
 
 type SavingBarStatus = 'unsaved' | 'saving' | 'error';
+type SavingBarPlacement = BottomBarPlacement;
 interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * unsaved: the message and the actions; saving: a turning loader and `savingMessage`, buttons off;
-     * error: an alert, `errorMessage`, and Salvar becomes `retryLabel` (Figma: `status`).
+     * unsaved: the message and the actions; saving: `savingMessage`, Salvar in loading (`savingLabel`, the only
+     * indicator, no loader in the message) and Descartar disabled; error: an alert, `errorMessage`, and Salvar
+     * becomes `retryLabel` (Figma: `status`).
      */
     status?: SavingBarStatus;
-    /** The unsaved text (Figma: `message`). */
+    /** The unsaved text, at most 2 lines with an ellipsis (Figma: `message`). */
     message?: ReactNode;
     /** The text while saving. */
     savingMessage?: ReactNode;
+    /** Salvar's label while saving, in loading (`<Button loading>`), also announced. */
+    savingLabel?: string;
     /** The error text. */
     errorMessage?: ReactNode;
     /** Called by Salvar (and by Tentar de novo, on error). */
     onSave: () => void;
-    /** Shows Descartar and is called when it is pressed (Figma: `showDiscard`). */
+    /**
+     * Shows Descartar and is called when it is pressed (Figma: `showDiscard`). Expanded only: in the compact
+     * arrangement (the phone) the bar has only the main button, and Descartar belongs to the way out, in the
+     * confirmation when leaving with changes (AlertDialog).
+     */
     onDiscard?: () => void;
     saveLabel?: string;
     retryLabel?: string;
     discardLabel?: string;
+    /**
+     * docked (default: the container's width, against the foot) or floating (from 1024 up: off the foot, rounded, the
+     * overlay shadow, 24 of margin, at most 768, centred). Below 1024 floating is docked (Figma: `placement`).
+     */
+    placement?: SavingBarPlacement;
+    /**
+     * One ~44 control on the left of the message, never running text (Figma: slot `leading`, `showLeading`). Present,
+     * even `null` while its control is hidden, it reserves 44 so the message and the buttons do not jump. Whoever fills
+     * it says its own changes (its own aria-live); the bar does not repeat them.
+     */
+    leading?: ReactNode;
 }
 /**
- * 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.
+ * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not saved, and leaves
+ * once saved (a Toast confirms). Built on the private BottomBar (.rds-bottom-bar), the FormActions' shell: the brand's
+ * primary colour (bottom-bar/background) in light, dark and every brand, 64 plus the safe area compact, 68 expanded,
+ * 24 at the sides, sticky at the bottom of the scrolling container. Its Buttons are Salvar in tone action fill and
+ * Descartar in tone neutral ghost, with the bar's colours (bottom-bar/button/*). Below 1024 (compact, the phone) it is
+ * one row: the message on the left and only Salvar on the right; Descartar is in the confirmation when leaving. While
+ * saving, the indicator is Salvar in loading, alone (with the LoadingOverlay too). On the phone it leaves while the
+ * on-screen keyboard is open and comes back on blur, never taking the focus. The content needs room below as tall as
+ * the bar (`scroll-padding-bottom`, plus `env(safe-area-inset-bottom)`). Styles: saving-bar.css,
+ * internal/bottom-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, savingLabel, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, placement, leading, className, ...rest }: SavingBarProps): react.JSX.Element;
 
-export { SavingBar, type SavingBarProps, type SavingBarStatus };
+export { SavingBar, type SavingBarPlacement, type SavingBarProps, type SavingBarStatus };