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

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

@@ -4,8 +4,10 @@ import { ReactNode } from 'react';
 type DataTableHeaderSearch = {
     value: string;
     onChange: (v: string) => void;
-    /** Also the field's accessible name. Default "Buscar…". */
+    /** What the field shows while empty, saying what is searched ("Buscar produtos…"). Default "Buscar…". */
     placeholder?: string;
+    /** The field's accessible name, apart from the placeholder ("Buscar produtos"). Default "Buscar". */
+    label?: string;
 };
 type DataTableFilterOption = {
     value: string;
@@ -26,15 +28,24 @@ type DataTableHeaderProps = {
     /**
      * Quick filters, always in view (Figma: `showQuickFilters` + the `quickFilters` slot): up to three, a
      * FilterChipGroup with its FilterChips; four or more, one Button with a menu (DropdownMenu), "Categoria: Todas".
+     * No quick filters: do not pass the slot (Figma: `showQuickFilters` false). Wrapped in a group "Filtros rápidos".
      */
     quickFilters?: ReactNode;
-    /** Clears the `filters` (the quick filters are cleared where they are, in view). */
+    /**
+     * Clears the `filters` (Figma: `clear`, "Limpar filtros" at the end of the active filters line, shown while a
+     * filter is on). The focus goes back to the search.
+     */
     onClear?: () => void;
     /**
-     * A view control after the filters and before the actions (Figma: `showView` + the `view` slot), such as a
-     * Checkbox "Agrupar por produto". In view in the compact arrangement too.
+     * A view control after the filters (Figma: `showView` + the `view` slot), such as a Checkbox "Agrupar por
+     * produto". In view in the compact arrangement too.
      */
     view?: ReactNode;
+    /**
+     * How many results (Figma: `showCount` + `count`), at the end of the tools: "128 resultados". A live region
+     * (aria-live polite), so the total is announced as the list is filtered.
+     */
+    count?: 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
@@ -52,21 +63,29 @@ declare function FilterDropdown({ f, placement }: {
     placement?: 'bottom-start' | 'bottom-end';
 }): react.JSX.Element;
 /**
- * DataTableHeader — a composition of the Input (search), FilterChips, Buttons, the DropdownMenu, the Popover and
- * 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.
+ * DataTableHeader — a composition of the Input (search), FilterChips, Chips, Buttons, the DropdownMenu, the Popover
+ * and the Drawer: the bar above a table (Figma [RDS] DataTableHeader, no variants). Two lines, 8 apart:
+ *
+ * - `row`, which never wraps: the tools (the search, the quick filters, the filter trigger, the view control and the
+ *   count) wrap inside their own group, packed to the start; the action stays outside it, at the end of the first
+ *   line, on the right. The search is always first and takes the free width, at least `--data-table-header-search-min`
+ *   (320; 200 below 1024); what does not fit wraps.
+ * - `active`, only while a filter is on (one filter too): the active filters as removable Chips ("Status: Abertos"),
+ *   wrapping, and "Limpar filtros" (a ghost sm Button, `onClear`) at the end, which gives the focus back to the search.
+ *
+ * Quick filters go in the `quickFilters` slot; 0 quick filters = do not pass the slot. One filter is a Button with a
+ * menu; two or more collapse into "Filtros" (a Popover), the count in its label ("Filtros · 2"). No Separator between
+ * the groups (it is left orphaned at the start of a wrapped line) and no Badge over the trigger.
  *
  * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024; the SavingBar's cut):
- * expanded from 1024, the Separator and the Buttons with their labels; compact below it, the search accepts 200 and
- * the filter is an outline IconButton (sliders, 44) with a dot (one filter on) or a counter (several), opening the
- * same Drawer or Popover. There is no screen prop.
+ * expanded from 1024, the trigger is a Button with its label; compact below it, an outline IconButton (sliders, 44)
+ * that, while a filter is on, becomes a fill Button with the number ("2"), named "Filtros, 2 ativos" or
+ * "Categoria, Pago"; one filter opens a Drawer (never a popover on a phone). There is no screen prop.
+ *
+ * Tab order is the visual order: search → quick filters → filter trigger → view → action → active Chips → Limpar
+ * filtros. Escape closes the menu, Popover or Drawer and gives the focus back to the trigger.
  * Styles: data-table-header.css.
  */
-declare function DataTableHeader({ search, filters, quickFilters, onClear, view, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
+declare function DataTableHeader({ search, filters, quickFilters, onClear, view, count, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
 
 export { type DataTableFilterDef, type DataTableFilterOption, DataTableHeader, type DataTableHeaderProps, type DataTableHeaderSearch, FilterDropdown };

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

@@ -5,8 +5,7 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Badge } from "./badge.js";
+import { useRef, useState } from "react";
 import { Button } from "./button.js";
 import { Chip } from "./chip.js";
 import { Drawer } from "./drawer.js";
@@ -14,18 +13,32 @@ import { DropdownMenu, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "./d
 import { FilterChip, FilterChipGroup } from "./filter-chip.js";
 import { IconButton } from "./icon-button.js";
 import { Input } from "./input.js";
-import { ChevronDownIcon, CloseIcon, SearchIcon, SlidersIcon } from "./internal/icons.js";
+import { SearchIcon, SlidersIcon } from "./internal/icons.js";
 import { Popover } from "./popover.js";
-import { Separator } from "./separator.js";
 import { Tooltip } from "./tooltip.js";
 function optionLabel(filter) {
   var _a, _b;
   if (filter.value === "") return filter.label;
   return (_b = (_a = filter.options.find((o) => o.value === filter.value)) == null ? void 0 : _a.label) != null ? _b : filter.label;
 }
+function chipLabel(filter) {
+  return `${filter.label}: ${optionLabel(filter)}`;
+}
 function FilterTrigger(_a) {
   var _b = _a, { filter } = _b, rest = __objRest(_b, ["filter"]);
-  return /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, rest), { tone: "neutral", variant: filter.value !== "" ? "fill" : "outline", icon: /* @__PURE__ */ jsx(ChevronDownIcon, {}), children: optionLabel(filter) }));
+  const on = filter.value !== "";
+  return /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({}, rest), {
+      tone: "neutral",
+      variant: on ? "fill" : "outline",
+      icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
+      iconPosition: "start",
+      "aria-label": on ? `${filter.label}, ${optionLabel(filter)}` : void 0,
+      "data-filter-toggle": "",
+      children: filter.label
+    })
+  );
 }
 function FilterDropdown({ f, placement = "bottom-start" }) {
   return /* @__PURE__ */ jsx(DropdownMenu, { align: placement === "bottom-end" ? "end" : "start", "aria-label": f.label, trigger: /* @__PURE__ */ jsx(FilterTrigger, { filter: f }), children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: f.value, onValueChange: f.onChange, children: f.options.map((opt) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: opt.value, textValue: opt.label, children: opt.count != null ? `${opt.label} \xB7 ${opt.count}` : opt.label }, opt.value)) }) });
@@ -44,26 +57,13 @@ function FiltersButton(_c) {
     })
   );
 }
-function FilterGroups({
-  filters,
-  onPick,
-  onClear,
-  showClear
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
-    filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__group", children: [
-      /* @__PURE__ */ jsx("p", { className: "rds-data-table-header__group-label", "aria-hidden": "true", children: f.label }),
-      /* @__PURE__ */ jsx(FilterChipGroup, { "aria-label": f.label, children: f.options.map((opt) => /* @__PURE__ */ jsx(FilterChip, { pressed: f.value === opt.value, count: opt.count, onClick: () => onPick(f, opt.value), children: opt.label }, opt.value)) })
-    ] }, f.key)),
-    onClear && showClear && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", onClick: onClear, children: "Limpar filtros" })
-  ] });
+function FilterGroups({ filters, onPick }) {
+  return /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__groups", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__group", children: [
+    /* @__PURE__ */ jsx("p", { className: "rds-data-table-header__group-label", "aria-hidden": "true", children: f.label }),
+    /* @__PURE__ */ jsx(FilterChipGroup, { "aria-label": f.label, children: f.options.map((opt) => /* @__PURE__ */ jsx(FilterChip, { pressed: f.value === opt.value, count: opt.count, onClick: () => onPick(f, opt.value), children: opt.label }, opt.value)) })
+  ] }, f.key)) });
 }
-function FiltersPopover({
-  filters,
-  onClear,
-  showClear,
-  trigger
-}) {
+function FiltersPopover({ filters, trigger }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx(Popover, { trigger, "aria-label": "Filtros", side: "bottom", align: "end", open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__scroll", children: /* @__PURE__ */ jsx(
     FilterGroups,
@@ -72,12 +72,7 @@ function FiltersPopover({
       onPick: (f, v) => {
         f.onChange(v);
         setOpen(false);
-      },
-      onClear: onClear ? () => {
-        onClear();
-        setOpen(false);
-      } : void 0,
-      showClear
+      }
     }
   ) }) });
 }
@@ -85,45 +80,42 @@ function CompactFilterTrigger(_e) {
   var _f = _e, {
     label,
     state,
-    indicator
+    active
   } = _f, rest = __objRest(_f, [
     "label",
     "state",
-    "indicator"
+    "active"
   ]);
-  return /* @__PURE__ */ jsxs("span", { className: "rds-data-table-header__trigger", children: [
-    /* @__PURE__ */ jsx(Tooltip, { text: label, children: /* @__PURE__ */ jsx(
-      IconButton,
-      __spreadProps(__spreadValues({}, rest), {
-        icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
-        label: state ? `${label}, ${state}` : label,
-        variant: "outline",
-        tone: "neutral",
-        size: "md",
-        "data-filter-toggle": ""
-      })
-    ) }),
-    indicator === "dot" && /* @__PURE__ */ jsx("span", { className: "rds-data-table-header__dot", "aria-hidden": "true" }),
-    typeof indicator === "number" && /* @__PURE__ */ jsx(Badge, { className: "rds-data-table-header__count", tone: "neutral", value: indicator, "aria-hidden": "true" })
-  ] });
+  const name = state ? `${label}, ${state}` : label;
+  return /* @__PURE__ */ jsx(Tooltip, { text: label, children: active > 0 ? /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, rest), { tone: "neutral", variant: "fill", icon: /* @__PURE__ */ jsx(SlidersIcon, {}), iconPosition: "start", "aria-label": name, "data-filter-toggle": "", children: String(active) })) : /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({}, rest), { icon: /* @__PURE__ */ jsx(SlidersIcon, {}), label: name, variant: "outline", tone: "neutral", size: "md", "data-filter-toggle": "" })) });
 }
 function activeState(count) {
   if (count === 0) return void 0;
   return count === 1 ? "1 ativo" : `${count} ativos`;
 }
+function useDrawer() {
+  const [open, setOpenState] = useState(false);
+  const triggerRef = useRef(null);
+  const setOpen = (next) => {
+    setOpenState(next);
+    if (!next) requestAnimationFrame(() => {
+      var _a;
+      return (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    });
+  };
+  const triggerProps = {
+    ref: triggerRef,
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    onClick: () => setOpen(true)
+  };
+  return { open, setOpen, triggerProps };
+}
 function MobileSingleFilter({ f }) {
-  const [open, setOpen] = useState(false);
+  const { open, setOpen, triggerProps } = useDrawer();
   const on = f.value !== "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      CompactFilterTrigger,
-      {
-        label: f.label,
-        state: on ? optionLabel(f) : void 0,
-        indicator: on ? "dot" : void 0,
-        onClick: () => setOpen(true)
-      }
-    ),
+    /* @__PURE__ */ jsx(CompactFilterTrigger, __spreadProps(__spreadValues({}, triggerProps), { label: f.label, state: on ? optionLabel(f) : void 0, active: on ? 1 : 0 })),
     /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, title: f.label, children: /* @__PURE__ */ jsx(
       FilterGroups,
       {
@@ -131,111 +123,101 @@ function MobileSingleFilter({ f }) {
         onPick: (_, v) => {
           f.onChange(v);
           setOpen(false);
-        },
-        showClear: false
+        }
       }
     ) })
   ] });
 }
+function MobileCollapsedFilters({
+  filters,
+  actions,
+  activeCount
+}) {
+  const { open, setOpen, triggerProps } = useDrawer();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CompactFilterTrigger, __spreadProps(__spreadValues({}, triggerProps), { label: "Filtros", state: activeState(activeCount), active: activeCount })),
+    /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
+      /* @__PURE__ */ jsx(
+        FilterGroups,
+        {
+          filters,
+          onPick: (f, v) => {
+            f.onChange(v);
+            setOpen(false);
+          }
+        }
+      ),
+      actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
+    ] }) })
+  ] });
+}
 function DataTableHeader({
   search,
   filters = [],
   quickFilters,
   onClear,
   view,
+  count,
   actions,
   className,
   mobileCollapse = false
 }) {
-  var _a, _b;
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const activeFilterCount = filters.filter((f) => f.value !== "").length;
-  const collapseDesktop = filters.length >= 2;
+  var _a, _b, _c;
+  const searchRef = useRef(null);
+  const rootRef = useRef(null);
   const activeFilters = filters.filter((f) => f.value !== "");
+  const activeFilterCount = activeFilters.length;
+  const collapseDesktop = filters.length >= 2;
   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: [
-    /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__tools", 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,
+  const clear = () => {
+    onClear == null ? void 0 : onClear();
+    requestAnimationFrame(() => {
+      var _a2, _b2, _c2;
+      if (searchRef.current) {
+        searchRef.current.focus();
+        return;
+      }
+      const toggles = (_b2 = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelectorAll("[data-filter-toggle]")) != null ? _b2 : [];
+      (_c2 = [...toggles].find((t) => t.offsetParent !== null)) == null ? void 0 : _c2.focus();
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: ["rds-data-table-header", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__tools", children: [
+        search && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__search", role: "search", "aria-label": (_a = search.label) != null ? _a : "Buscar", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: searchRef,
+            type: "search",
+            "aria-label": (_b = search.label) != null ? _b : "Buscar",
+            placeholder: (_c = search.placeholder) != null ? _c : "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", role: "group", "aria-label": "Filtros r\xE1pidos", children: quickFilters }),
+        filters.length > 0 && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__wide", children: collapseDesktop ? /* @__PURE__ */ jsx(FiltersPopover, { filters, trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount }) }) : filters.map((f) => /* @__PURE__ */ jsx(FilterDropdown, { f }, f.key)) }),
+        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,
           {
-            label: "Filtros",
-            state: activeState(activeFilterCount),
-            indicator: activeFilterCount === 0 ? void 0 : filters.length === 1 ? "dot" : activeFilterCount,
-            onClick: () => setSheetOpen(true)
+            filters,
+            trigger: /* @__PURE__ */ jsx(CompactFilterTrigger, { label: "Filtros", state: activeState(activeFilterCount), active: activeFilterCount })
           }
-        ),
-        /* @__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 })
-        ] }) })
+        ) }),
+        mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(MobileCollapsedFilters, { filters, actions, activeCount: activeFilterCount }) }),
+        view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view }),
+        count != null && count !== false && /* @__PURE__ */ jsx("span", { className: "rds-data-table-header__count", "aria-live": "polite", children: count })
       ] }),
-      view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view })
+      actions && /* @__PURE__ */ jsx("div", { className: ["rds-data-table-header__actions", mobileCollapse && "rds-data-table-header__wide"].filter(Boolean).join(" "), children: actions })
     ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: ["rds-data-table-header__actions", mobileCollapse && "rds-data-table-header__wide"].filter(Boolean).join(" "), children: actions })
+    activeFilters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__active", children: [
+      /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__chips", children: activeFilters.map((f) => /* @__PURE__ */ jsx(Chip, { onRemove: () => f.onChange(""), removeLabel: `Remover filtro ${chipLabel(f)}`, children: chipLabel(f) }, f.key)) }),
+      onClear && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", size: "sm", onClick: clear, children: "Limpar filtros" })
+    ] })
   ] });
 }
 export {

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

@@ -1,28 +1,60 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type FormActionsLayout = 'inline' | 'stacked';
+type FormActionsLayout = 'inline' | 'stacked' | 'bar';
 interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The buttons (Figma: slot `actions`, up to 3), always in reading order: Cancelar first, the primary
      * last. In `stacked` the primary goes on top, and it is moved first in the page too, so the focus
-     * order follows what is seen.
+     * order follows what is seen. In `bar`, compact (below 1024), only the last one (the primary) is shown.
      */
     children: ReactNode;
-    /** A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). */
+    /**
+     * A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). It is a live region
+     * (`role="status"`): when it changes (say, "Falta preço e prazo"), it is said without moving focus.
+     */
     helper?: ReactNode;
     /**
-     * inline (desktop: floats and hugs its content, sentence left, actions right) or stacked (phone: edge
-     * to edge at the foot, primary full width on top) (Figma: `layout`).
+     * inline (desktop: floats and hugs its content, sentence left, actions right), stacked (phone, a task
+     * with no way out in the topbar: edge to edge at the foot, primary full width on top) or bar (the foot of
+     * a create form: the SavingBar's skeleton, neutral; expanded from 1024, compact in one row below it)
+     * (Figma: `layout`).
      */
     layout?: FormActionsLayout;
+    /**
+     * `bar` only, with a `helper`: turns the helper into a button that opens what is missing (a Drawer with
+     * the checklist), in the compact arrangement only; expanded, the helper stays text (Figma: `showDetails`).
+     */
+    onDetails?: () => void;
+    /** Said after the helper in the details button's accessible name, hidden on screen. */
+    detailsLabel?: string;
+    /** Whether the panel the details button opens is open (aria-expanded). */
+    detailsExpanded?: boolean;
+    /** The id of that panel (aria-controls). */
+    detailsControls?: string;
 }
 /**
  * FormActions — Figma [RDS] Actions/FormActions. The actions at the end of a create form or a task,
  * there from the first second. Where it sticks is the page's job: `position: sticky` at the bottom of
- * the scrolling container, with `scroll-padding-bottom` equal to its height, so a focused field is never
- * hidden behind it (WCAG 2.4.11). Styles: form-actions.css.
+ * the scrolling container. Styles: form-actions.css.
+ *
+ * `layout="bar"` is the foot of a create form: the SavingBar's skeleton (68 expanded, 64 plus the safe area
+ * compact, 24 at the sides, the primary in the same place), but neutral: form-actions/bar/background
+ * (surface/page) with the hairline form-actions/border on top, never the brand's colour (that is the
+ * SavingBar's signal, for a pending edit). Below 1024 (the screen width, as the SavingBar) it is one row:
+ * the helper on the left (at most 2 lines; with `onDetails`, the button that opens what is missing) and only
+ * the primary on the right.
+ *
+ * The app's rules around it:
+ * - The primary is never disabled: validate on click, show the error on the field and move the focus to the
+ *   first pending one.
+ * - The scrolling container takes `scroll-padding-bottom` equal to the bar's height plus
+ *   `env(safe-area-inset-bottom)`, so a focused field is never hidden behind it (WCAG 2.4.11).
+ * - On the phone the bar leaves while the on-screen keyboard is open (it would cover the field being typed).
+ * - Compact has no Cancelar: the way out is back or X in the topbar, with an AlertDialog "Sair sem criar?"
+ *   ([Continuar editando] [Sair sem criar]) when something was typed. Cancelar can also go in the footer of
+ *   the details Drawer.
  */
-declare function FormActions({ children, helper, layout, className, ...rest }: FormActionsProps): react.JSX.Element;
+declare function FormActions({ children, helper, layout, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: FormActionsProps): react.JSX.Element;
 
 export { FormActions, type FormActionsLayout, type FormActionsProps };

package/dist/components/form-actions.js

@@ -3,17 +3,65 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children } from "react";
+import { ChevronUpIcon } from "./internal/icons.js";
 function FormActions(_a) {
-  var _b = _a, { children, helper, layout = "inline", className } = _b, rest = __objRest(_b, ["children", "helper", "layout", "className"]);
+  var _b = _a, {
+    children,
+    helper,
+    layout = "inline",
+    onDetails,
+    detailsLabel = "Ver o que falta",
+    detailsExpanded,
+    detailsControls,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "helper",
+    "layout",
+    "onDetails",
+    "detailsLabel",
+    "detailsExpanded",
+    "detailsControls",
+    "className"
+  ]);
   const actions = Children.toArray(children);
+  const bar = layout === "bar";
+  const details = bar && helper != null && helper !== false && onDetails !== void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({}, rest), {
       className: ["rds-form-actions", `rds-form-actions--${layout}`, className].filter(Boolean).join(" "),
       children: [
-        helper && /* @__PURE__ */ jsx("p", { className: "rds-form-actions__helper", children: helper }),
+        helper && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: ["rds-form-actions__helper", details && "rds-form-actions__helper--details"].filter(Boolean).join(" "),
+            role: "status",
+            children: bar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "rds-form-actions__text", children: helper }),
+              details && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "rds-form-actions__details",
+                  "aria-expanded": detailsExpanded != null ? detailsExpanded : false,
+                  "aria-controls": detailsControls,
+                  onClick: onDetails,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "rds-form-actions__text", children: helper }),
+                    /* @__PURE__ */ jsxs("span", { className: "rds-visually-hidden", children: [
+                      ", ",
+                      detailsLabel
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "rds-form-actions__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
+                  ]
+                }
+              )
+            ] }) : helper
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "rds-form-actions__actions", children: layout === "stacked" ? actions.reverse() : actions })
       ]
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.24",
+  "version": "2.0.0-next.27",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.9"
+    "@rojaostudio/ds-core": "1.1.0-next.10"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -3582,35 +3582,57 @@ input:focus-visible + .rds-checkbox__box {
 /* components/data-table-header.css */
 /* @tokens data-table-header */
 /*
- * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
- * 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
- * (badge neutral fill, 6 in from the top right corner) or a neutral number Badge over the corner (-6 top, -12 right).
+ * DataTableHeader (Figma [RDS] DataTableHeader, no variants). One component token, local to this stylesheet:
+ * --data-table-header-search-min, the search's minimum width (Figma `data-table-header/search-min`, viewport
+ * collection of the Base Tokens, not published yet): 320 from lg 1024, 200 below it. Everything else comes from the
+ * Input, FilterChip, Chip, Button, IconButton, Checkbox, DropdownMenu, Popover and Drawer; the count borrows the
+ * table's muted label (--table-header-label, text/muted), the bar being the table's.
+ *
+ * The bar is a column, 8 apart, 12 above the table:
+ * - `row`, which never wraps, aligned to the top: the `tools` group (the search, the quick filters, the filter
+ *   trigger, the view control, the count) takes the free width and is what wraps, packed to the start, the search
+ *   first taking the free width, at least search-min (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.
+ * - `active`, only while a filter is on: the `chips` (wrapping, at least 280 before "Limpar filtros" goes down)
+ *   and "Limpar filtros" at the end.
+ * 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: the trigger as a Button with its label); compact below it (the __narrow
+ * parts: the trigger as an IconButton of 44, or a fill Button with the number while a filter is on).
  * In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
  */
 .rds-data-table-header {
+  --data-table-header-search-min: 320px;
+
   box-sizing: border-box;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  margin-bottom: var(--space-12);
+}
+
+@media (max-width: 1023px) {
+  .rds-data-table-header {
+    --data-table-header-search-min: 200px;
+  }
+}
+
+/* Figma `row`: tools + actions, never wraps. */
+.rds-data-table-header__row {
   display: flex;
   flex-wrap: nowrap;
   align-items: flex-start;
   gap: var(--space-8);
-  margin-bottom: var(--space-12);
 }
 
-/* Figma `tools`: horizontal, wrap, fill. */
+/* Figma `tools`: horizontal, wrap, fill, packed to the start. */
 .rds-data-table-header__tools {
   flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: var(--space-8);
 }
 
@@ -3620,10 +3642,15 @@ input:focus-visible + .rds-checkbox__box {
   align-self: flex-start;
 }
 
-/* Scoped to the bar: the field's own `min-width: 0` (internal/field.css) comes later in the bundle. */
-.rds-data-table-header .rds-data-table-header__search {
-  flex: 1 1 calc(var(--space-64) * 5);
-  min-width: min(calc(var(--space-64) * 5), 100%);
+/* The search takes the free width, at least search-min, never wider than the group: it wraps before it squeezes. */
+.rds-data-table-header__search {
+  flex: 1 1 var(--data-table-header-search-min);
+  min-width: min(var(--data-table-header-search-min), 100%);
+  display: flex;
+}
+
+.rds-data-table-header__search > * {
+  flex: 1 1 auto;
 }
 
 .rds-data-table-header__quick,
@@ -3649,44 +3676,33 @@ input:focus-visible + .rds-checkbox__box {
   .rds-data-table-header__narrow {
     display: flex;
   }
-
-  /* Compact: the search accepts 200 (40 × 5), so it sits on one line with the filter and an IconButton at 390. */
-  .rds-data-table-header .rds-data-table-header__search {
-    flex-basis: calc(var(--space-40) * 5);
-    min-width: min(calc(var(--space-40) * 5), 100%);
-  }
 }
 
-/* The compact filter: the IconButton with its indicator on the corner. */
-.rds-data-table-header__trigger {
-  position: relative;
-  display: inline-flex;
-}
-
-.rds-data-table-header__dot,
+/* Figma `count`: "128 resultados", a live region at the end of the tools. */
 .rds-data-table-header__count {
-  position: absolute;
-  pointer-events: none;
-}
-
-.rds-data-table-header__dot {
-  top: calc(var(--space-4) * 1.5);
-  right: calc(var(--space-4) * 1.5);
-  width: var(--space-8);
-  height: var(--space-8);
-  border-radius: var(--radius-full);
-  background: var(--badge-neutral-fill-background);
+  font-family: var(--type-font-stack);
+  font-size: var(--type-small-size);
+  line-height: var(--type-small-line);
+  color: var(--table-header-label);
+  white-space: nowrap;
 }
 
-.rds-data-table-header__count {
-  top: calc(var(--space-4) * -1.5);
-  right: calc(var(--space-12) * -1);
+/* Figma `activeFilters`: its own line, wrap, 8 apart. */
+.rds-data-table-header__active {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8);
 }
 
-@media (forced-colors: active) {
-  .rds-data-table-header__dot {
-    background: CanvasText;
-  }
+/* Figma `chips`: fill, wrap, at least 280 before "Limpar filtros" goes down. */
+.rds-data-table-header__chips {
+  flex: 1 1 280px;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8);
 }
 
 .rds-data-table-header__scroll {
@@ -4639,6 +4655,16 @@ input:focus-visible + .rds-checkbox__box {
  * FormActions (Actions collection, form-actions/*): the actions at the end of a form, on the card
  * surface with a hairline. inline floats (container radius, raised elevation, 16 24 padding, 24 between
  * sentence and actions); stacked sticks to the foot edge to edge (16 padding, hairline on top).
+ * bar is the foot of a create form, the SavingBar's skeleton but neutral: form-actions/bar/background
+ * (surface/page) with the hairline form-actions/border on top (drawn inside, so it adds no height), full
+ * width (at least 320), 16 between the helper and the actions (8 apart). Two arrangements by the screen
+ * width, as the SavingBar (layout/compact below lg 1024): expanded, 12 24 padding (68 = 12 + 44 + 12), the
+ * helper grows (at least 160) beside Cancelar and the primary; compact, one row, 10 24 padding
+ * (64 = 10 + 44 + 10) plus the safe area at the bottom, the helper (flex 1, at most 2 lines) on the left and
+ * only the last action (the primary) on the right.
+ * Details (showDetails, onDetails in code): compact, the helper becomes a text button with chevron-up 20 at
+ * the right (12 apart); hover underlines, focus draws form-actions/focus/ring (focus/ring-width, radius/focus);
+ * the touch area is 44 tall without changing the drawing. Expanded, the helper stays text.
  */
 .rds-form-actions {
   box-sizing: border-box;
@@ -4694,10 +4720,125 @@ input:focus-visible + .rds-checkbox__box {
   width: 100%;
 }
 
+/* bar: the foot of a create form, the SavingBar's skeleton, neutral. */
+.rds-form-actions--bar {
+  gap: var(--space-16);
+  justify-content: flex-end;
+  width: 100%;
+  min-width: min(320px, 100%);
+  padding: var(--space-12) var(--space-24);
+  background: var(--form-actions-bar-background);
+  /* The hairline on top, inside: the bar stays 68 / 64 tall. */
+  box-shadow: inset 0 var(--border-width) 0 var(--form-actions-border);
+}
+
+.rds-form-actions--bar .rds-form-actions__helper {
+  display: flex;
+  flex: 1 1 160px;
+  align-items: center;
+  min-width: 160px;
+}
+
+.rds-form-actions--bar .rds-form-actions__actions {
+  flex: none;
+  flex-wrap: nowrap;
+}
+
+.rds-form-actions__text {
+  display: -webkit-box;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.rds-form-actions__icon {
+  display: inline-flex;
+  flex: none;
+  width: var(--size-20);
+  height: var(--size-20);
+}
+
+.rds-form-actions__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rds-form-actions__details {
+  position: relative;
+  display: none;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-12);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-focus);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* The touch area: 44 tall around the helper, invisible. */
+.rds-form-actions__details::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  min-height: 44px;
+  height: 100%;
+  transform: translateY(-50%);
+}
+
+.rds-form-actions__details:hover .rds-form-actions__text {
+  text-decoration: underline;
+}
+
+.rds-form-actions__details:focus-visible {
+  outline: var(--focus-ring-width) solid var(--form-actions-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+
+/* Compact: by the screen width (the Figma viewport mode), as the SavingBar, not a container query. */
+@media (max-width: 1023px) {
+  .rds-form-actions--bar {
+    padding-block: 10px;
+    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .rds-form-actions--bar .rds-form-actions__helper {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  /* Only the primary (the last action): Cancelar is the topbar's back or X, or the details Drawer's footer. */
+  .rds-form-actions--bar .rds-form-actions__actions > :not(:last-child) {
+    display: none;
+  }
+
+  .rds-form-actions__helper--details > .rds-form-actions__text {
+    display: none;
+  }
+
+  .rds-form-actions__details {
+    display: flex;
+  }
+}
+
 @media (forced-colors: active) {
   .rds-form-actions {
     border-color: CanvasText;
   }
+
+  .rds-form-actions--bar {
+    border-top: var(--border-width) solid CanvasText;
+  }
 }
 
 /* components/google-account-chooser.css */

package/styles/rds/components.css

@@ -124,6 +124,8 @@
   --savingbar-button-fill-background: var(--text-on-primary);
   --savingbar-button-fill-label: var(--colors-primary-default);
   --savingbar-button-ghost-label: var(--text-on-primary);
+  --form-actions-bar-background: var(--surface-page);
+  --form-actions-focus-ring: var(--focus-ring);
 
   /* blocks */
   --topnav-background: var(--surface-card);