@rojaostudio/ds 2.0.0-next.23 → 2.0.0-next.24

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export { HoverCard, HoverCardProps } from './hover-card.js';
 export { Dialog, DialogClose, DialogProps, DialogSize } from './dialog.js';
 export { Sheet, SheetClose, SheetProps, SheetSide } from './sheet.js';
 export { Drawer, DrawerClose, DrawerProps } from './drawer.js';
+export { LoadingOverlay, LoadingOverlayProps } from './loading-overlay.js';
 export { DropdownMenu, DropdownMenuAlign, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuItemTone, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSide } from './dropdown-menu.js';
 export { ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuItemTone, ContextMenuProps, ContextMenuSeparator } from './context-menu.js';
 export { Command, CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandProps } from './command.js';

package/dist/components/index.js

@@ -5,6 +5,7 @@ import { HoverCard } from "./hover-card.js";
 import { Dialog, DialogClose } from "./dialog.js";
 import { Sheet, SheetClose } from "./sheet.js";
 import { Drawer, DrawerClose } from "./drawer.js";
+import { LoadingOverlay } from "./loading-overlay.js";
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -223,6 +224,7 @@ export {
   KbdGroup,
   Listbox,
   ListboxOption,
+  LoadingOverlay,
   Marker,
   MediaTile,
   Message,

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/saving-bar.d.ts

@@ -4,19 +4,26 @@ import { HTMLAttributes, ReactNode } from 'react';
 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`).
+     * 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`). */
     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 app, in the footer of
+     * the details Drawer or in the confirmation when leaving with changes (AlertDialog).
+     */
     onDiscard?: () => void;
     saveLabel?: string;
     retryLabel?: string;
@@ -38,8 +45,11 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
  * saved, and leaves once saved. It is the brand's primary colour (savingbar/background, colors/primary/default),
  * in light and dark and in every brand: 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,
- * with the bar's colours (savingbar/button/*). Styles: saving-bar.css.
+ * with the bar's colours (savingbar/button/*). Below 1024 (compact, the phone) it is one row, 64 tall plus the
+ * safe area: the message (or the details button) on the left and only Salvar on the right; Descartar is the app's
+ * there, in the footer of the details Drawer or in the confirmation when leaving. While saving, the indicator is
+ * Salvar in loading, alone (with the LoadingOverlay too). Styles: saving-bar.css.
  */
-declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
+declare function SavingBar({ status, message, savingMessage, savingLabel, 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

@@ -6,13 +6,13 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
-import { Loader } from "./internal/button.js";
 import { AlertIcon, ChevronUpIcon } from "./internal/icons.js";
 function SavingBar(_a) {
   var _b = _a, {
     status = "unsaved",
     message = "Altera\xE7\xF5es n\xE3o salvas",
     savingMessage = "Salvando\u2026",
+    savingLabel = "Salvando\u2026",
     errorMessage = "N\xE3o salvou. Tente de novo.",
     onSave,
     onDiscard,
@@ -28,6 +28,7 @@ function SavingBar(_a) {
     "status",
     "message",
     "savingMessage",
+    "savingLabel",
     "errorMessage",
     "onSave",
     "onDiscard",
@@ -53,7 +54,6 @@ function SavingBar(_a) {
       className: ["rds-savingbar", 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", { className: "rds-savingbar__text", children: text }),
           details && /* @__PURE__ */ jsxs(
@@ -76,8 +76,8 @@ function SavingBar(_a) {
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
-          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 })
+          onDiscard && /* @__PURE__ */ jsx(Button, { className: "rds-savingbar__discard", tone: "neutral", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
+          /* @__PURE__ */ jsx(Button, { tone: "action", variant: "fill", loading: saving, loadingLabel: savingLabel, onClick: onSave, children: saving ? savingLabel : error ? retryLabel : saveLabel })
         ] })
       ] })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.23",
+  "version": "2.0.0-next.24",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",

package/styles/rds/components-styles.css

@@ -6783,6 +6783,70 @@ body:has(.rds-modal) {
   }
 }
 
+/* components/loading-overlay.css */
+/* @tokens loading-overlay */
+/*
+ * LoadingOverlay (Overlays collection, loading-overlay/*): a veil over the whole screen (loading-overlay/scrim,
+ * surface/scrim) in the overlay layer (z/overlay), and a panel in the middle (loading-overlay/background,
+ * surface/card; radius/container, 24 padding, 16 between the Spinner lg and the label, at most 320 wide,
+ * elevation/modal). The label is type/label Medium in loading-overlay/text (text/body), centred. The panel gives the
+ * text its own surface, so it reads over any screen, light, dark or in the brand. It fades in; with reduced motion,
+ * no fade (and the Spinner turns slowly, spinner.css).
+ */
+.rds-loading-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-16);
+  background: var(--loading-overlay-scrim);
+  animation: rds-loading-overlay-in 150ms ease-out;
+}
+
+.rds-loading-overlay__panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-16);
+  max-width: min(320px, 100%);
+  padding: var(--space-24);
+  border-radius: var(--radius-container);
+  background: var(--loading-overlay-background);
+  box-shadow: var(--elevation-modal);
+  color: var(--loading-overlay-text);
+  font-family: var(--type-font-stack);
+  outline: none;
+}
+
+.rds-loading-overlay__label {
+  margin: 0;
+  font-size: var(--type-label-size);
+  font-weight: 500;
+  line-height: var(--type-label-line);
+  text-align: center;
+}
+
+@keyframes rds-loading-overlay-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rds-loading-overlay {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .rds-loading-overlay__panel {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
 /* components/marker.css */
 /* @tokens marker */
 /*
@@ -8467,10 +8531,13 @@ input:focus-visible + .rds-radio__circle {
  * The bar redeclares the Button tokens those two read: the Salvar fill is savingbar/button/fill/background with
  * savingbar/button/fill/label, its hover the fill at 85% over the bar (active 70%); the Descartar label is
  * savingbar/button/ghost/label, its hover the label colour at 15% (active 25%); the focus ring is savingbar/focus/ring;
- * disabled (saving) is each Button at 40% over the bar, as the Figma layer opacity.
+ * disabled (Descartar while saving) is the Button at 40% over the bar, as the Figma layer opacity. While saving, Salvar
+ * is in loading (its loader in the label colour): the only indicator, none in the message.
  * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024): expanded from 1024,
- * the message grows (at least 160) beside the actions; compact below it, the message on top and Descartar and
- * Salvar under it, sharing the width.
+ * 12 24 padding (68 tall), the message grows (at least 160) beside Descartar and Salvar; compact below it, one row,
+ * 10 24 padding (64 = 10 + 44 + 10) plus the safe area at the bottom, the message (flex 1, at most 2 lines) on the
+ * left and only the main button on the right: Descartar is not shown (it lives in the details Drawer's footer or in
+ * the confirmation when leaving).
  * Details (showDetails, onDetails in code): in compact, the unsaved message becomes a text button with chevron-up 20 at
  * the right (12 apart) that opens the Drawer with what is missing; hover underlines, focus draws the ring
  * savingbar/focus/ring (focus/ring-width, radius/focus) 4 around the message box, inside stroke, as the Figma
@@ -8543,22 +8610,6 @@ input:focus-visible + .rds-radio__circle {
   height: 100%;
 }
 
-.rds-savingbar__loader > svg {
-  animation: rds-savingbar-turn 1s linear infinite;
-}
-
-@keyframes rds-savingbar-turn {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .rds-savingbar__loader > svg {
-    animation-duration: 3s;
-  }
-}
-
 .rds-savingbar__actions {
   display: flex;
   flex: none;
@@ -8605,19 +8656,18 @@ input:focus-visible + .rds-radio__circle {
 }
 
 @media (max-width: 1023px) {
-  .rds-savingbar__row {
-    flex-direction: column;
-    align-items: stretch;
+  .rds-savingbar {
+    padding-block: 10px;
+    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
   }
 
   .rds-savingbar__message {
-    flex: none;
+    flex: 1 1 0;
     min-width: 0;
   }
 
-  .rds-savingbar__actions > * {
-    flex: 1 1 0;
-    min-width: 0;
+  .rds-savingbar .rds-savingbar__discard {
+    display: none;
   }
 
   .rds-savingbar__message--details > .rds-savingbar__text {

package/styles/rds/components.css

@@ -908,11 +908,11 @@
   --progress-fill: var(--chart-series-1);
   --progress-label: var(--text-body);
   --progress-value: var(--text-muted);
-  --spinner-indicator: var(--colors-primary-default);
+  --spinner-indicator: var(--colors-primary-dark);
   --spinner-track: var(--surface-tint-strong);
   --spinner-label: var(--text-muted);
-  --spinner-inverse-indicator: var(--text-on-primary-strong);
-  --spinner-inverse-label: var(--text-on-primary-strong);
+  --spinner-inverse-indicator: var(--text-on-primary);
+  --spinner-inverse-label: var(--text-on-primary);
   --rating-empty: var(--border-strong);
   --rating-label: var(--text-muted);
   --rating-star: var(--colors-state-warning);
@@ -1007,5 +1007,8 @@
   --image-crop-dialog-selection: var(--text-on-cover);
   --image-crop-dialog-handle: var(--text-on-cover);
   --image-crop-dialog-stage-background: var(--surface-muted);
+  --loading-overlay-scrim: var(--surface-scrim);
+  --loading-overlay-background: var(--surface-card);
+  --loading-overlay-text: var(--text-body);
 }
 }