@rojaostudio/ds 2.0.0-next.26 → 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/package.json

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

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 {