@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/questionnaire.js

@@ -0,0 +1,107 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { CheckboxGroup } from "./checkbox-group.js";
+import { ChoiceCardGroup } from "./choice-card.js";
+import { AlertIcon } from "./internal/icons.js";
+import { Progress } from "./progress.js";
+import { RadioGroup } from "./radio-group.js";
+function Questionnaire(_a) {
+  var _b = _a, {
+    step,
+    steps,
+    title,
+    description,
+    answer = "single",
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    error,
+    onBack,
+    onSkip,
+    onNext,
+    className
+  } = _b, rest = __objRest(_b, [
+    "step",
+    "steps",
+    "title",
+    "description",
+    "answer",
+    "children",
+    "value",
+    "defaultValue",
+    "onValueChange",
+    "error",
+    "onBack",
+    "onSkip",
+    "onNext",
+    "className"
+  ]);
+  const errorMessage = error ? /* @__PURE__ */ jsxs("span", { className: "rds-questionnaire__error", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-questionnaire__error-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertIcon, {}) }),
+    /* @__PURE__ */ jsx("span", { children: error })
+  ] }) : void 0;
+  const legend = /* @__PURE__ */ jsx("span", { className: "rds-questionnaire__title", children: title });
+  const hint = description ? /* @__PURE__ */ jsx("span", { className: "rds-questionnaire__description", children: description }) : void 0;
+  let body;
+  if (answer === "single") {
+    body = /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        legend,
+        hint,
+        errorMessage,
+        value,
+        defaultValue,
+        onValueChange,
+        children
+      }
+    );
+  } else if (answer === "multiple") {
+    body = /* @__PURE__ */ jsx(CheckboxGroup, { legend, hint, errorMessage, children });
+  } else {
+    const heading = /* @__PURE__ */ jsxs("span", { className: "rds-questionnaire__heading", children: [
+      legend,
+      hint
+    ] });
+    body = /* @__PURE__ */ jsxs("div", { className: "rds-questionnaire__body", children: [
+      answer === "card" ? /* @__PURE__ */ jsx(ChoiceCardGroup, { legend: heading, value, defaultValue, onValueChange, children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "rds-questionnaire__text-heading", children: heading }),
+        children
+      ] }),
+      errorMessage && /* @__PURE__ */ jsx("p", { role: "alert", className: "rds-questionnaire__alert", children: errorMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    __spreadProps(__spreadValues({
+      noValidate: true,
+      "aria-label": title
+    }, rest), {
+      className: ["rds-questionnaire", className].filter(Boolean).join(" "),
+      onSubmit: (event) => {
+        event.preventDefault();
+        onNext();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Progress, { size: "sm", value: step, max: steps, label: `Pergunta ${step} de ${steps}`, showValue: false }),
+        body,
+        /* @__PURE__ */ jsxs("div", { className: "rds-questionnaire__actions", children: [
+          onBack && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", onClick: onBack, children: "Voltar" }),
+          /* @__PURE__ */ jsx("span", { className: "rds-questionnaire__spacer" }),
+          onSkip && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", onClick: onSkip, children: "Pular" }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", children: step >= steps ? "Enviar" : "Pr\xF3xima" })
+        ] })
+      ]
+    })
+  );
+}
+export {
+  Questionnaire
+};

package/dist/components/radio-group.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ChoiceFieldsetProps } from './internal/fieldset.js';
+
+interface RadioGroupProps extends Omit<ChoiceFieldsetProps, 'onChange' | 'defaultValue'> {
+    /** The form field name shared by every option. By default a generated one. */
+    name?: string;
+    /** Controlled: the chosen option's value. */
+    value?: string;
+    /** Uncontrolled: the option chosen at first. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * RadioGroup — Figma [RDS] Forms/RadioGroup. A question and 2 to 5 single-choice options (Radio children,
+ * Figma slot `options`) in a <fieldset role="radiogroup">, with the group's hint and error. Tab enters on the
+ * chosen option; the arrows move and choose (native radios sharing one name). Styles: radio-group.css and
+ * internal/fieldset.css.
+ */
+declare function RadioGroup({ name, value, defaultValue, onValueChange, required, disabled, error, ...rest }: RadioGroupProps): react.JSX.Element;
+
+export { RadioGroup, type RadioGroupProps };

package/dist/components/radio-group.js

@@ -0,0 +1,40 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { Children, isValidElement, useId } from "react";
+import { hasContent } from "./internal/field.js";
+import { ChoiceFieldset } from "./internal/fieldset.js";
+import { RadioGroupContext } from "./internal/radio-context.js";
+function RadioGroup(_a) {
+  var _b = _a, { name, value, defaultValue, onValueChange, required, disabled, error } = _b, rest = __objRest(_b, ["name", "value", "defaultValue", "onValueChange", "required", "disabled", "error"]);
+  const generated = useId();
+  const invalid = Boolean(error || hasContent(rest.errorMessage));
+  const first = Children.toArray(rest.children).find(
+    (child) => isValidElement(child) && child.props.value !== void 0
+  );
+  const firstValue = isValidElement(first) ? first.props.value : void 0;
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: { name: name != null ? name : generated, value, defaultValue, onValueChange, required, firstValue, disabled, error: invalid },
+      children: /* @__PURE__ */ jsx(
+        ChoiceFieldset,
+        __spreadValues({
+          kind: "rds-radio-group",
+          role: "radiogroup",
+          "aria-required": required || void 0,
+          "aria-invalid": invalid || void 0,
+          required,
+          disabled,
+          error: invalid
+        }, rest)
+      )
+    }
+  );
+}
+export {
+  RadioGroup
+};

package/dist/components/radio.d.ts

@@ -1,33 +1,19 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 
-interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-    label?: ReactNode;
-    description?: ReactNode;
-    error?: string;
-    size?: 'sm' | 'md';
+interface RadioProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'children' | 'name' | 'value' | 'checked' | 'defaultChecked' | 'size'> {
+    /** The option's value, sent with the form and used by the RadioGroup's `value`. */
+    value: string;
+    /** The option's text (Figma: `showLabel` + `label`). Without it, pass aria-label. */
+    children?: ReactNode;
+    /** A line under the label (Figma: `showHint` + `hint`), tied by aria-describedby. */
+    hint?: ReactNode;
 }
-declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
-interface RadioOption<T extends string = string> {
-    value: T;
-    label: ReactNode;
-    description?: ReactNode;
-    disabled?: boolean;
-}
-interface RadioGroupProps<T extends string = string> {
-    name: string;
-    value: T | null;
-    onChange: (value: T) => void;
-    options: RadioOption<T>[];
-    /** Layout. default = vertical. */
-    orientation?: 'horizontal' | 'vertical';
-    size?: 'sm' | 'md';
-    error?: string;
-    /** Label do group como `<legend>`. */
-    legend?: ReactNode;
-    required?: boolean;
-    className?: string;
-}
-declare function RadioGroup<T extends string = string>({ name, value, onChange, options, orientation, size, error, legend, required, className, }: RadioGroupProps<T>): react.JSX.Element;
+/**
+ * Radio — Figma [RDS] Forms/Radio. One single-choice option. It only exists inside a RadioGroup, which gives
+ * it the name, the chosen value, required, disabled and the error. Native <input type="radio">.
+ * Styles: radio.css and internal/choice.css.
+ */
+declare function Radio({ value, children, hint, disabled, id, className, style, onChange, ...input }: RadioProps): react.JSX.Element;
 
-export { Radio, RadioGroup, type RadioGroupProps, type RadioOption, type RadioProps };
+export { Radio, type RadioProps };

package/dist/components/radio.js

@@ -1,97 +1,56 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { forwardRef, useId } from "react";
-const SIZE_CLASS = {
-  sm: { box: "size-3.5", dot: "size-1.5", label: "text-caption" },
-  md: { box: "size-4", dot: "size-2", label: "text-label" }
-};
-const Radio = forwardRef(function Radio2(_a, ref) {
-  var _b = _a, { label, description, error, size = "md", className = "", id } = _b, props = __objRest(_b, ["label", "description", "error", "size", "className", "id"]);
-  const generatedId = useId();
-  const inputId = id != null ? id : generatedId;
-  const errId = `${inputId}-error`;
-  const sz = SIZE_CLASS[size];
-  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      htmlFor: inputId,
-      className: [
-        "inline-flex items-start gap-2 cursor-pointer",
-        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" ") }, /* @__PURE__ */ React.createElement(
-      "input",
-      __spreadValues({
-        ref,
-        type: "radio",
-        id: inputId,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errId : void 0,
-        className: [
-          "peer appearance-none rounded-full shrink-0 cursor-pointer",
-          sz.box,
-          "bg-surface-default",
-          error ? "border border-danger checked:border-danger" : "border border-stroke-control checked:border-brand-primary",
-          "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
-          "disabled:cursor-not-allowed transition-colors"
-        ].join(" ")
-      }, props)
-    ), /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        "aria-hidden": true,
-        className: [
-          "absolute inset-0 m-auto rounded-full bg-transparent transition-colors pointer-events-none",
-          sz.dot,
-          error ? "peer-checked:bg-danger" : "peer-checked:bg-brand-primary"
-        ].join(" ")
-      }
-    )),
-    (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description))
-  ), error && /* @__PURE__ */ React.createElement("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" ") }, error));
-});
-function RadioGroup({
-  name,
-  value,
-  onChange,
-  options,
-  orientation = "vertical",
-  size = "md",
-  error,
-  legend,
-  required,
-  className = ""
-}) {
-  return /* @__PURE__ */ React.createElement(
-    "fieldset",
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ChoiceRow } from "./internal/choice.js";
+import { warnIfUnlabelled } from "./internal/field.js";
+import { RadioGroupContext } from "./internal/radio-context.js";
+function Radio(_a) {
+  var _b = _a, { value, children, hint, disabled, id, className, style, onChange } = _b, input = __objRest(_b, ["value", "children", "hint", "disabled", "id", "className", "style", "onChange"]);
+  const group = useContext(RadioGroupContext);
+  if (!group) console.warn("[@rojaostudio/ds] Radio: use it inside a RadioGroup. A Radio alone is not a choice.");
+  warnIfUnlabelled("Radio", children, input["aria-label"], input["aria-labelledby"]);
+  const controlled = (group == null ? void 0 : group.value) !== void 0;
+  const off = disabled || (group == null ? void 0 : group.disabled);
+  return /* @__PURE__ */ jsx(
+    ChoiceRow,
     {
-      className: ["flex flex-col gap-2", className].join(" "),
-      "aria-invalid": error ? true : void 0
-    },
-    legend && /* @__PURE__ */ React.createElement("legend", { className: "text-label font-medium text-fg-primary mb-0.5" }, legend, required && /* @__PURE__ */ React.createElement("span", { className: "text-danger ml-0.5", "aria-label": "obrigat\xF3rio" }, "*")),
-    /* @__PURE__ */ React.createElement("div", { className: ["flex", orientation === "horizontal" ? "flex-row gap-4 flex-wrap" : "flex-col gap-2"].join(" ") }, options.map((opt) => /* @__PURE__ */ React.createElement(
-      Radio,
-      {
-        key: opt.value,
-        name,
-        value: opt.value,
-        checked: value === opt.value,
-        onChange: () => onChange(opt.value),
-        label: opt.label,
-        description: opt.description,
-        disabled: opt.disabled,
-        size
-      }
-    ))),
-    error && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-danger-text" }, error)
+      kind: "rds-radio",
+      id,
+      label: children,
+      hint,
+      disabled: off,
+      invalid: group == null ? void 0 : group.error,
+      className,
+      style,
+      control: ({ id: controlId, describedBy }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, input), {
+            id: controlId,
+            type: "radio",
+            name: group == null ? void 0 : group.name,
+            value,
+            required: (group == null ? void 0 : group.required) && (group.firstValue === void 0 || group.firstValue === value),
+            disabled: off,
+            "aria-describedby": [describedBy, input["aria-describedby"]].filter(Boolean).join(" ") || void 0
+          }), controlled ? { checked: (group == null ? void 0 : group.value) === value } : { defaultChecked: (group == null ? void 0 : group.defaultValue) === value }), {
+            onChange: (event) => {
+              var _a2;
+              onChange == null ? void 0 : onChange(event);
+              if (event.target.checked) (_a2 = group == null ? void 0 : group.onValueChange) == null ? void 0 : _a2.call(group, value);
+            }
+          })
+        ),
+        /* @__PURE__ */ jsx("span", { className: "rds-radio__circle", "aria-hidden": "true" })
+      ] })
+    }
   );
 }
 export {
-  Radio,
-  RadioGroup
+  Radio
 };

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

@@ -8,6 +8,11 @@ interface RowActionItem {
     disabled?: boolean;
     onClick: () => void;
 }
+/**
+ * RowActions — a composition of the Button (outline, neutral), the IconButton with its Tooltip and the
+ * DropdownMenu: the actions at the end of a table row. One action in view, the rest behind "Mais ações"; danger
+ * items go last, after a separator. Clicks do not reach the row. Styles: row-actions.css.
+ */
 interface RowActionsProps {
     /** Rótulo do botão principal (ex: "Ver detalhes"). */
     primaryLabel: string;

package/dist/components/row-actions.js

@@ -1,8 +1,11 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { MoreVertical } from "lucide-react";
-import { Menu, MenuItem, MenuSeparator } from "./menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { DropdownMenu, DropdownMenuItem, DropdownMenuSeparator } from "./dropdown-menu.js";
 import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { MoreVerticalIcon } from "./internal/icons.js";
 function RowActions({
   primaryLabel,
   primaryHref,
@@ -14,62 +17,60 @@ function RowActions({
   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 primaryCls = "inline-flex items-center gap-1 text-caption font-medium border border-stroke-default rounded-(--radius-control) px-2.5 py-1 text-fg-secondary hover:bg-surface-page hover:border-stroke-strong transition-colors whitespace-nowrap";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-1" }, primaryHref ? /* @__PURE__ */ React.createElement("a", { href: primaryHref, className: primaryCls, onClick: (e) => e.stopPropagation() }, primaryLabel) : primaryOnClick ? /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      className: primaryCls,
-      onClick: (e) => {
-        e.stopPropagation();
-        primaryOnClick();
-      }
-    },
-    primaryLabel
-  ) : null, items.length > 0 && /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(
-    Menu,
-    {
-      trigger: /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          icon: /* @__PURE__ */ React.createElement(MoreVertical, null),
-          "aria-label": "Mais a\xE7\xF5es",
-          size: "sm",
-          variant: "ghost",
-          color: "secondary"
-        }
-      ),
-      placement: "bottom-end",
-      minWidth: 160
-    },
-    ({ close }) => /* @__PURE__ */ React.createElement(React.Fragment, null, normalItems.map((item, i) => /* @__PURE__ */ React.createElement(
-      MenuItem,
+  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,
       {
-        key: i,
-        icon: item.icon,
-        variant: item.variant,
-        disabled: item.disabled,
-        onClick: () => {
-          item.onClick();
-          close();
-        }
-      },
-      item.label
-    )), showSep && dangerItems.length > 0 && /* @__PURE__ */ React.createElement(MenuSeparator, null), dangerItems.map((item, i) => /* @__PURE__ */ React.createElement(
-      MenuItem,
+        variant: "outline",
+        tone: "neutral",
+        onClick: (e) => {
+          e.stopPropagation();
+          primaryOnClick();
+        },
+        children: primaryLabel
+      }
+    ) : null,
+    items.length > 0 && /* @__PURE__ */ jsx("div", { className: "rds-row-actions__more", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(
+      DropdownMenu,
       {
-        key: `d-${i}`,
-        icon: item.icon,
-        variant: "danger",
-        disabled: item.disabled,
-        onClick: () => {
-          item.onClick();
-          close();
-        }
-      },
-      item.label
-    )))
-  )));
+        trigger: /* @__PURE__ */ jsx(Tooltip, { text: "Mais a\xE7\xF5es", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: /* @__PURE__ */ jsx(MoreVerticalIcon, {}),
+            label: "Mais a\xE7\xF5es",
+            variant: "ghost",
+            tone: "neutral"
+          }
+        ) }),
+        align: "end",
+        children: [
+          normalItems.map((item, i) => /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              icon: item.icon,
+              tone: item.variant,
+              disabled: item.disabled,
+              onSelect: item.onClick,
+              children: item.label
+            },
+            i
+          )),
+          showSep && dangerItems.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          dangerItems.map((item, i) => /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              icon: item.icon,
+              tone: "danger",
+              disabled: item.disabled,
+              onSelect: item.onClick,
+              children: item.label
+            },
+            `d-${i}`
+          ))
+        ]
+      }
+    ) })
+  ] });
 }
 export {
   RowActions

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

@@ -11,11 +11,6 @@ type SavingBarRegistration = {
     pending?: boolean;
     saveLabel?: string;
     discardLabel?: string;
-    /** Optional third button shown between Discard and Save. Hidden when bars are aggregated. */
-    secondary?: {
-        label: string;
-        onClick: () => void;
-    };
 };
 declare function SavingBarProvider({ children }: {
     children: ReactNode;

package/dist/components/saving-bar-context.js

@@ -3,6 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
 import {
   createContext,
   useCallback,
@@ -13,7 +14,7 @@ import {
   useRef,
   useState
 } from "react";
-import { Loader2 } from "lucide-react";
+import { SavingBar } from "./saving-bar.js";
 const SavingBarContext = createContext({
   bars: /* @__PURE__ */ new Map(),
   register: () => {
@@ -39,7 +40,7 @@ function SavingBarProvider({ children }) {
     });
   }, []);
   const value = useMemo(() => ({ bars, register, unregister }), [bars, register, unregister]);
-  return /* @__PURE__ */ React.createElement(SavingBarContext.Provider, { value }, children);
+  return /* @__PURE__ */ jsx(SavingBarContext.Provider, { value, children });
 }
 function usePageSavingBar(reg, deps = []) {
   const id = useId();
@@ -58,7 +59,7 @@ function useSavingBarActive() {
   return false;
 }
 function SavingBarRoot() {
-  var _a, _b, _c;
+  var _a, _b;
   const { bars } = useContext(SavingBarContext);
   const [aggPending, setAggPending] = useState(false);
   const visible = useMemo(
@@ -82,40 +83,21 @@ function SavingBarRoot() {
     var _a2;
     for (const b of visible) (_a2 = b.onDiscard) == null ? void 0 : _a2.call(b);
   }
-  const message = (_a = single == null ? void 0 : single.message) != null ? _a : null;
-  const saveLabel = (_b = single == null ? void 0 : single.saveLabel) != null ? _b : "Salvar tudo";
-  const discardLabel = (_c = single == null ? void 0 : single.discardLabel) != null ? _c : "Descartar tudo";
+  const saveLabel = (_a = single == null ? void 0 : single.saveLabel) != null ? _a : "Salvar tudo";
+  const discardLabel = (_b = single == null ? void 0 : single.discardLabel) != null ? _b : "Descartar tudo";
   const onSave = single ? single.onSave : saveAll;
   const onDiscard = single ? single.onDiscard : discardAll;
-  const secondary = single == null ? void 0 : single.secondary;
-  return /* @__PURE__ */ React.createElement("div", { className: "fixed bottom-3 right-6 z-50 transition-all duration-300 ease-out" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-(--radius-card) px-4 py-3 [background:var(--saving-bar-bg)] [box-shadow:var(--saving-bar-shadow)]" }, message && /* @__PURE__ */ React.createElement("span", { className: "text-label pr-1 [color:var(--saving-bar-message)]" }, message), onDiscard && /* @__PURE__ */ React.createElement(
-    "button",
+  return /* @__PURE__ */ jsx("div", { className: "rds-saving-bar-root", children: /* @__PURE__ */ jsx(
+    SavingBar,
     {
-      type: "button",
-      onClick: onDiscard,
-      disabled: anyPending,
-      className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]"
-    },
-    discardLabel
-  ), secondary && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: secondary.onClick,
-      disabled: anyPending,
-      className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]"
-    },
-    secondary.label
-  ), onSave && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => onSave(),
-      disabled: anyPending,
-      className: "rounded-(--radius-card) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[80px] justify-center [background:var(--saving-bar-save-bg)] [color:var(--saving-bar-save-text)] hover:[background:var(--saving-bar-save-bg-hover)]"
-    },
-    anyPending ? /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" }) : saveLabel
-  )));
+      status: anyPending ? "saving" : "unsaved",
+      message: single ? single.message : `${visible.length} altera\xE7\xF5es pendentes`,
+      saveLabel,
+      discardLabel,
+      onSave: () => void (onSave == null ? void 0 : onSave()),
+      onDiscard
+    }
+  ) });
 }
 export {
   SavingBarProvider,

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

@@ -1,18 +1,33 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-interface SavingBarProps {
-    visible: boolean;
-    onSave?: () => void;
+type SavingBarStatus = 'unsaved' | 'saving' | 'error';
+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`).
+     */
+    status?: SavingBarStatus;
+    /** The unsaved text (Figma: `message`). */
+    message?: ReactNode;
+    /** The text while saving. */
+    savingMessage?: ReactNode;
+    /** 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`). */
     onDiscard?: () => void;
-    pending?: boolean;
     saveLabel?: string;
+    retryLabel?: string;
     discardLabel?: string;
-    message?: string;
-    children?: ReactNode;
-    /** floating = fixed bottom-right; inline = inside page flow */
-    variant?: 'floating' | 'inline';
 }
-declare function SavingBar({ visible, onSave, onDiscard, pending, saveLabel, discardLabel, message, children, variant, }: SavingBarProps): react.JSX.Element;
+/**
+ * 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.
+ */
+declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, className, ...rest }: SavingBarProps): react.JSX.Element;
 
-export { SavingBar, type SavingBarProps };
+export { SavingBar, type SavingBarProps, type SavingBarStatus };