@rojaostudio/ds 2.0.0-next.20 → 2.0.0-next.22

package/dist/components/data-table-header.d.ts

@@ -35,6 +35,12 @@ type DataTableHeaderProps = {
      * Checkbox "Agrupar por produto". In view in the compact arrangement too.
      */
     view?: ReactNode;
+    /**
+     * The list's action (Figma: `showActions`, off by default, + the `actions` instance): an IconButton, neutral outline
+     * md, with its Tooltip, such as a gear "Organizar categorias" or exporting. It sits outside the tools, always at the
+     * end of the FIRST line, on the right; the tools wrap, the action never goes down.
+     * Creating is NOT an action of the bar: creating is the FAB. The component does not enforce this; it documents it.
+     */
     actions?: ReactNode;
     className?: string;
     /** In the compact arrangement (bar below 1024), moves the filters and the actions into a Drawer. The quick filters stay in view. */
@@ -47,8 +53,10 @@ declare function FilterDropdown({ f, placement }: {
 }): react.JSX.Element;
 /**
  * DataTableHeader — a composition of the Input (search), FilterChips, Buttons, the DropdownMenu, the Popover and
- * the Drawer: the bar above a table. The search is always on the left and takes the free width (at least 320); the
- * filters are always on the right; what does not fit wraps. Quick filters go in the `quickFilters` slot; one filter
+ * the Drawer: the bar above a table. A row that never wraps: the tools (the search, the quick filters, the filters,
+ * the view control) wrap inside their own group; the action stays outside it, at the end of the first line, on the
+ * right. The search is always on the left and takes the free width (at least 320); the filters are always on the
+ * right; what does not fit wraps. Quick filters go in the `quickFilters` slot; one filter
  * is a dropdown, two or more collapse into "Filtros" (the active ones stay in view as removable Chips); the `view`
  * control comes after the filters, before the actions. "Filtros · N" counts the active `filters`, the ones that
  * button opens.

package/dist/components/data-table-header.js

@@ -155,85 +155,87 @@ function DataTableHeader({
   const singleFilter = filters.length === 1 ? filters[0] : null;
   const lead = Boolean(search || quickFilters);
   return /* @__PURE__ */ jsxs("div", { className: ["rds-data-table-header", className].filter(Boolean).join(" "), children: [
-    search && /* @__PURE__ */ jsx(
-      Input,
-      {
-        className: "rds-data-table-header__search",
-        type: "search",
-        "aria-label": (_a = search.placeholder) != null ? _a : "Buscar\u2026",
-        placeholder: (_b = search.placeholder) != null ? _b : "Buscar\u2026",
-        leadingIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-        clearable: true,
-        clearLabel: "Limpar busca",
-        value: search.value,
-        onChange: (e) => search.onChange(e.target.value)
-      }
-    ),
-    quickFilters && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__quick", children: quickFilters }),
-    filters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__wide", children: [
-      lead && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-      collapseDesktop ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        activeFilters.map((f) => /* @__PURE__ */ jsx(Chip, { onRemove: () => f.onChange(""), removeLabel: `Remover filtro ${f.label}`, children: optionLabel(f) }, f.key)),
-        /* @__PURE__ */ jsx(
-          FiltersPopover,
-          {
-            filters,
-            onClear,
-            showClear: activeFilterCount > 0,
-            trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
-          }
-        )
-      ] }) : filters.map((f) => /* @__PURE__ */ jsx(FilterDropdown, { f }, f.key)),
-      onClear && activeFilterCount > 0 && !collapseDesktop && /* @__PURE__ */ jsx(Tooltip, { text: "Limpar filtros", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: "Limpar filtros", variant: "ghost", tone: "neutral", onClick: onClear }) })
-    ] }),
-    singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(MobileSingleFilter, { f: singleFilter }) }),
-    !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(
-      FiltersPopover,
-      {
-        filters,
-        onClear,
-        showClear: activeFilterCount > 0,
-        trigger: /* @__PURE__ */ jsx(
-          CompactFilterTrigger,
-          {
-            label: "Filtros",
-            state: activeState(activeFilterCount),
-            indicator: activeFilterCount > 0 ? activeFilterCount : void 0
-          }
-        )
-      }
-    ) }),
-    mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__narrow", children: [
-      /* @__PURE__ */ jsx(
-        CompactFilterTrigger,
+    /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__tools", children: [
+      search && /* @__PURE__ */ jsx(
+        Input,
         {
-          label: "Filtros",
-          state: activeState(activeFilterCount),
-          indicator: activeFilterCount === 0 ? void 0 : filters.length === 1 ? "dot" : activeFilterCount,
-          onClick: () => setSheetOpen(true)
+          className: "rds-data-table-header__search",
+          type: "search",
+          "aria-label": (_a = search.placeholder) != null ? _a : "Buscar\u2026",
+          placeholder: (_b = search.placeholder) != null ? _b : "Buscar\u2026",
+          leadingIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
+          clearable: true,
+          clearLabel: "Limpar busca",
+          value: search.value,
+          onChange: (e) => search.onChange(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx(Drawer, { open: sheetOpen, onOpenChange: setSheetOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
+      quickFilters && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__quick", children: quickFilters }),
+      filters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__wide", children: [
+        lead && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+        collapseDesktop ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          activeFilters.map((f) => /* @__PURE__ */ jsx(Chip, { onRemove: () => f.onChange(""), removeLabel: `Remover filtro ${f.label}`, children: optionLabel(f) }, f.key)),
+          /* @__PURE__ */ jsx(
+            FiltersPopover,
+            {
+              filters,
+              onClear,
+              showClear: activeFilterCount > 0,
+              trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
+            }
+          )
+        ] }) : filters.map((f) => /* @__PURE__ */ jsx(FilterDropdown, { f }, f.key)),
+        onClear && activeFilterCount > 0 && !collapseDesktop && /* @__PURE__ */ jsx(Tooltip, { text: "Limpar filtros", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: "Limpar filtros", variant: "ghost", tone: "neutral", onClick: onClear }) })
+      ] }),
+      singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(MobileSingleFilter, { f: singleFilter }) }),
+      !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(
+        FiltersPopover,
+        {
+          filters,
+          onClear,
+          showClear: activeFilterCount > 0,
+          trigger: /* @__PURE__ */ jsx(
+            CompactFilterTrigger,
+            {
+              label: "Filtros",
+              state: activeState(activeFilterCount),
+              indicator: activeFilterCount > 0 ? activeFilterCount : void 0
+            }
+          )
+        }
+      ) }),
+      mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__narrow", children: [
         /* @__PURE__ */ jsx(
-          FilterGroups,
+          CompactFilterTrigger,
           {
-            filters,
-            onPick: (f, v) => {
-              f.onChange(v);
-              setSheetOpen(false);
-            },
-            onClear: onClear ? () => {
-              onClear();
-              setSheetOpen(false);
-            } : void 0,
-            showClear: activeFilterCount > 0
+            label: "Filtros",
+            state: activeState(activeFilterCount),
+            indicator: activeFilterCount === 0 ? void 0 : filters.length === 1 ? "dot" : activeFilterCount,
+            onClick: () => setSheetOpen(true)
           }
         ),
-        actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
-      ] }) })
+        /* @__PURE__ */ jsx(Drawer, { open: sheetOpen, onOpenChange: setSheetOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
+          /* @__PURE__ */ jsx(
+            FilterGroups,
+            {
+              filters,
+              onPick: (f, v) => {
+                f.onChange(v);
+                setSheetOpen(false);
+              },
+              onClear: onClear ? () => {
+                onClear();
+                setSheetOpen(false);
+              } : void 0,
+              showClear: activeFilterCount > 0
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
+        ] }) })
+      ] }),
+      view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view })
     ] }),
-    view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view }),
-    actions && /* @__PURE__ */ jsx("div", { className: mobileCollapse ? "rds-data-table-header__wide" : "rds-data-table-header__actions", children: actions })
+    actions && /* @__PURE__ */ jsx("div", { className: ["rds-data-table-header__actions", mobileCollapse && "rds-data-table-header__wide"].filter(Boolean).join(" "), children: actions })
   ] });
 }
 export {

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

@@ -35,10 +35,10 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not
- * 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.
+ * 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.
  */
 declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
 

package/dist/components/saving-bar.js

@@ -50,7 +50,7 @@ function SavingBar(_a) {
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
-      className: ["rds-savingbar", "ds-plate", className].filter(Boolean).join(" "),
+      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, {}) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.20",
+  "version": "2.0.0-next.22",
   "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

@@ -3583,9 +3583,10 @@ input:focus-visible + .rds-checkbox__box {
 /* @tokens data-table-header */
 /*
  * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
- * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table, packed to the right: the search on the left
- * takes the free width, at least 320 (never wider than the bar); the quick filters, the filters, the view control
- * and the actions follow it on the right, and what does not fit wraps.
+ * Popover and Drawer bring theirs. The bar is one row that never wraps, aligned to the top, 8 apart, 12 above the
+ * table: the `tools` group (the search, the quick filters, the filters, the view control) takes the free width and
+ * is what wraps, packed to the right, the search on the left taking the free width, at least 320 (never wider than
+ * the group); the action sits outside it, fixed at the end of the FIRST line, on the right, and never goes down.
  * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024; the SavingBar's cut):
  * expanded from 1024 (the __wide parts: Separator, Buttons with labels); compact below it (the __narrow parts: the
  * filter as an IconButton of 44), where the search accepts 200. On the IconButton, while a filter is on, a dot of 8
@@ -3596,11 +3597,27 @@ input:focus-visible + .rds-checkbox__box {
   box-sizing: border-box;
   width: 100%;
   display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--space-8);
+  margin-bottom: var(--space-12);
+}
+
+/* Figma `tools`: horizontal, wrap, fill. */
+.rds-data-table-header__tools {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: var(--space-8);
-  margin-bottom: var(--space-12);
+}
+
+/* Figma `actions`: outside `tools`, at the end of the first line. */
+.rds-data-table-header__actions {
+  flex: none;
+  align-self: flex-start;
 }
 
 /* Scoped to the bar: the field's own `min-width: 0` (internal/field.css) comes later in the bundle. */
@@ -8443,10 +8460,14 @@ input:focus-visible + .rds-radio__circle {
 /* @tokens savingbar */
 /*
  * SavingBar (Actions collection, savingbar/*): full width (at least 320), 12 24 padding, 16 between the
- * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand plate
- * (.ds-plate on the element, set by the component): savingbar/background is surface/page and savingbar/text is text/body,
- * read in the brand mode, so it comes out the same over a light or a dark page. The Buttons are tone action (Salvar)
- * and tone neutral ghost (Descartar), read on the plate too.
+ * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand's
+ * primary colour: savingbar/background is colors/primary/default and savingbar/text is text/on/primary (the text,
+ * the error alert, the chevron and the loader), so it follows the theme, light or dark, and every brand.
+ * The Buttons stay the Button: Salvar tone action fill and Descartar tone neutral ghost, with the bar's colours.
+ * 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.
  * 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.
@@ -8463,6 +8484,23 @@ input:focus-visible + .rds-radio__circle {
   background: var(--savingbar-background);
   color: var(--savingbar-text);
   font-family: var(--type-font-stack);
+
+  /* The Button tokens Salvar (action fill) and Descartar (neutral ghost) read, in the bar's colours. */
+  --button-focus-ring: var(--savingbar-focus-ring);
+  --button-action-fill-background-default: var(--savingbar-button-fill-background);
+  --button-action-fill-background-hover: color-mix(in srgb, var(--savingbar-button-fill-background) 85%, var(--savingbar-background));
+  --button-action-fill-background-active: color-mix(in srgb, var(--savingbar-button-fill-background) 70%, var(--savingbar-background));
+  --button-action-fill-label: var(--savingbar-button-fill-label);
+  --button-action-fill-icon: var(--savingbar-button-fill-label);
+  --button-neutral-ghost-label: var(--savingbar-button-ghost-label);
+  --button-neutral-ghost-icon: var(--savingbar-button-ghost-label);
+  --button-neutral-ghost-background-hover: color-mix(in srgb, var(--savingbar-button-ghost-label) 15%, transparent);
+  --button-neutral-ghost-background-active: color-mix(in srgb, var(--savingbar-button-ghost-label) 25%, transparent);
+  --button-disabled-fill-background: color-mix(in srgb, var(--savingbar-button-fill-background) 40%, var(--savingbar-background));
+  --button-disabled-fill-label: color-mix(in srgb, var(--savingbar-button-fill-label) 40%, var(--savingbar-background));
+  --button-disabled-fill-icon: var(--button-disabled-fill-label);
+  --button-disabled-ghost-label: color-mix(in srgb, var(--savingbar-button-ghost-label) 40%, var(--savingbar-background));
+  --button-disabled-ghost-icon: var(--button-disabled-ghost-label);
 }
 
 .rds-savingbar__row {

package/styles/rds/components.css

@@ -73,7 +73,7 @@
   --button-inverse-focus-ring: var(--text-on-primary-strong);
   --button-inverse-disabled-fill-background: var(--colors-primary-light);
   --button-inverse-disabled-label: var(--text-disabled-invert);
-  --savingbar-background: var(--surface-page);
+  --savingbar-background: var(--colors-primary-default);
   --toggle-label: var(--text-body);
   --toggle-border: var(--border-strong);
   --toggle-background-hover: var(--surface-muted);
@@ -83,7 +83,7 @@
   --toggle-label-disabled: var(--text-disabled);
   --toggle-border-pressed: var(--colors-primary-default);
   --toggle-border-disabled: var(--border-default);
-  --savingbar-text: var(--text-body);
+  --savingbar-text: var(--text-on-primary);
   --fab-cta-background-default: var(--colors-primary-default);
   --fab-cta-background-hover: var(--colors-primary-active);
   --fab-cta-text: var(--text-on-primary);
@@ -120,7 +120,10 @@
   --button-size-lg-icon-only: var(--size-24);
   --button-size-lg-text-size: var(--type-body-size);
   --button-size-lg-text-line: var(--type-body-line);
-  --savingbar-focus-ring: var(--focus-ring);
+  --savingbar-focus-ring: var(--text-on-primary);
+  --savingbar-button-fill-background: var(--text-on-primary);
+  --savingbar-button-fill-label: var(--colors-primary-default);
+  --savingbar-button-ghost-label: var(--text-on-primary);
 
   /* blocks */
   --topnav-background: var(--surface-card);