@rojaostudio/ds 2.0.0-next.2 → 2.0.0-next.21

package/dist/components/chart.js

@@ -36,7 +36,11 @@ function Chart(_a) {
     showRightAxis = true,
     showLegend = true,
     showTooltip = true,
-    showAllDates = true,
+    dates,
+    dateEvery,
+    showAllDates,
+    hrefs,
+    onSelect,
     showTable = false,
     height = 200,
     className
@@ -50,7 +54,11 @@ function Chart(_a) {
     "showRightAxis",
     "showLegend",
     "showTooltip",
+    "dates",
+    "dateEvery",
     "showAllDates",
+    "hrefs",
+    "onSelect",
     "showTable",
     "height",
     "className"
@@ -78,7 +86,14 @@ function Chart(_a) {
     return `${s.name} ${formatFor(s)((_a3 = s.data[index]) != null ? _a3 : 0)}`;
   }).join(", ");
   const legendName = (s) => dual ? `${s.name} (${onRight(s) ? "direita" : "esquerda"})` : s.name;
-  const labelIndexes = showAllDates || count <= 3 ? labels.map((_, i) => i) : [0, Math.floor((count - 1) / 2), count - 1];
+  const every = dateEvery && dateEvery > 1 ? Math.floor(dateEvery) : null;
+  const allDates = (dates != null ? dates : showAllDates === void 0 ? "edges" : showAllDates ? "all" : "edges") === "all";
+  const labelIndexes = every ? labels.map((_, i) => i).filter((i) => i % every === 0) : allDates || count <= 3 ? labels.map((_, i) => i) : [0, Math.floor((count - 1) / 2), count - 1];
+  const linked = type !== "line" && Boolean(onSelect || (hrefs == null ? void 0 : hrefs.some(Boolean)));
+  const choose = (index) => {
+    if (onSelect) onSelect(index);
+    else if (hrefs == null ? void 0 : hrefs[index]) window.location.assign(hrefs[index]);
+  };
   const onPointerMove = (event) => {
     const box = event.currentTarget.getBoundingClientRect();
     const ratio = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
@@ -94,6 +109,11 @@ function Chart(_a) {
       Home: 0,
       End: count - 1
     };
+    if (linked && event.key === "Enter" && active !== null) {
+      event.preventDefault();
+      choose(active);
+      return;
+    }
     if (!(event.key in keys)) return;
     event.preventDefault();
     setActive(keys[event.key]);
@@ -133,6 +153,7 @@ function Chart(_a) {
     onPointerLeave: (event) => {
       if (document.activeElement !== event.currentTarget) setActive(null);
     },
+    onClick: linked ? () => active !== null && choose(active) : void 0,
     onFocus: () => setActive((current) => current != null ? current : 0),
     onBlur: () => setActive(null),
     onKeyDown
@@ -142,19 +163,37 @@ function Chart(_a) {
   if (type === "bar") {
     const s = shown[0];
     const top = Math.max(0, ...(_a2 = s == null ? void 0 : s.data) != null ? _a2 : [0]);
-    body = /* @__PURE__ */ jsx("div", { className: "rds-chart__bars", "aria-hidden": "true", children: labels.map((name, i) => {
+    body = /* @__PURE__ */ jsx("div", { className: "rds-chart__bars", "aria-hidden": linked ? void 0 : true, children: labels.map((name, i) => {
       var _a3, _b2;
-      return /* @__PURE__ */ jsxs("div", { className: "rds-chart__bar-row", children: [
+      const value = s ? formatLeft((_a3 = s.data[i]) != null ? _a3 : 0) : "";
+      const parts = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-label", children: name }),
         /* @__PURE__ */ jsx("span", { className: "rds-chart__track", children: /* @__PURE__ */ jsx(
           "span",
           {
             className: "rds-chart__bar",
-            style: __spreadProps(__spreadValues({}, seriesStyle(i + 1)), { width: `${top ? ((_a3 = s == null ? void 0 : s.data[i]) != null ? _a3 : 0) / top * 100 : 0}%` })
+            style: __spreadProps(__spreadValues({}, seriesStyle(i + 1)), { width: `${top ? ((_b2 = s == null ? void 0 : s.data[i]) != null ? _b2 : 0) / top * 100 : 0}%` })
           }
         ) }),
-        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-value", children: s ? formatLeft((_b2 = s.data[i]) != null ? _b2 : 0) : "" })
-      ] }, name);
+        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-value", children: value })
+      ] });
+      const href = hrefs == null ? void 0 : hrefs[i];
+      const accessibleName = `${name}: ${value}`;
+      if (linked && href && !onSelect)
+        return /* @__PURE__ */ jsx("a", { href, className: "rds-chart__bar-row rds-chart__bar-row--link", "aria-label": accessibleName, children: parts }, name);
+      if (linked && onSelect)
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rds-chart__bar-row rds-chart__bar-row--link",
+            "aria-label": accessibleName,
+            onClick: () => onSelect(i),
+            children: parts
+          },
+          name
+        );
+      return /* @__PURE__ */ jsx("div", { className: "rds-chart__bar-row", children: parts }, name);
     }) });
   } else {
     body = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -208,7 +247,10 @@ function Chart(_a) {
         ] })),
         rightScale && /* @__PURE__ */ jsx(Axis, { ticks: rightScale.ticks, format: formatRight, side: "right" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "rds-chart__labels", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: `rds-chart__labels-track rds-chart__labels-track--${type}`, children: labelIndexes.map((i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__label", style: { left: `${x(i)}%` }, children: labels[i] }, i)) }) })
+      /* @__PURE__ */ jsx("div", { className: "rds-chart__labels", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: `rds-chart__labels-track rds-chart__labels-track--${type}${every ? " rds-chart__labels-track--ticks" : ""}`, children: [
+        every && labels.map((_, i) => /* @__PURE__ */ jsx("i", { className: "rds-chart__tick", style: { left: `${x(i)}%` } }, `t${i}`)),
+        labelIndexes.map((i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__label", style: { left: `${x(i)}%` }, children: labels[i] }, i))
+      ] }) })
     ] });
   }
   const firstColumn = type === "line" ? "Data" : "Categoria";
@@ -216,7 +258,7 @@ function Chart(_a) {
     "figure",
     __spreadProps(__spreadValues({}, rest), {
       "aria-label": label,
-      className: ["rds-chart", `rds-chart--${type}`, dual && "rds-chart--dual", className].filter(Boolean).join(" "),
+      className: ["rds-chart", `rds-chart--${type}`, dual && "rds-chart--dual", linked && "rds-chart--linked", className].filter(Boolean).join(" "),
       children: [
         body,
         showLegend && type !== "bar" && /* @__PURE__ */ jsx("ul", { className: "rds-chart__legend", "aria-hidden": "true", children: shown.map((s, n) => /* @__PURE__ */ jsxs("li", { children: [
@@ -229,26 +271,30 @@ function Chart(_a) {
             shown.map((s) => /* @__PURE__ */ jsx(TableHead, { align: "end", children: legendName(s) }, s.name))
           ] }) }),
           /* @__PURE__ */ jsx(TableBody, { children: labels.map((name, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: name }),
+            /* @__PURE__ */ jsx(TableCell, { children: linked && onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "rds-chart__table-link", onClick: () => onSelect(i), children: name }) : linked && (hrefs == null ? void 0 : hrefs[i]) ? /* @__PURE__ */ jsx("a", { className: "rds-chart__table-link", href: hrefs[i], children: name }) : name }),
             shown.map((s) => {
               var _a3;
               return /* @__PURE__ */ jsx(TableCell, { align: "end", children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
             })
           ] }, name)) })
-        ] }) : /* @__PURE__ */ jsxs("table", { className: "rds-visually-hidden", children: [
-          /* @__PURE__ */ jsx("caption", { children: label }),
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "col", children: firstColumn }),
-            shown.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: legendName(s) }, s.name))
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: labels.map((name, i) => /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "row", children: name }),
-            shown.map((s) => {
-              var _a3;
-              return /* @__PURE__ */ jsx("td", { children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
-            })
-          ] }, name)) })
-        ] })
+        ] }) : (
+          // The clip goes on a wrapper: a <table> ignores the 1px box and overflow of .rds-visually-hidden, so it
+          // kept its full size, anchored to the page and stretched the page scroll.
+          /* @__PURE__ */ jsx("div", { className: "rds-visually-hidden", children: /* @__PURE__ */ jsxs("table", { children: [
+            /* @__PURE__ */ jsx("caption", { children: label }),
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "col", children: firstColumn }),
+              shown.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: legendName(s) }, s.name))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: labels.map((name, i) => /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "row", children: name }),
+              shown.map((s) => {
+                var _a3;
+                return /* @__PURE__ */ jsx("td", { children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
+              })
+            ] }, name)) })
+          ] }) })
+        )
       ]
     })
   );

package/dist/components/choice-carousel.d.ts

@@ -18,7 +18,7 @@ interface ChoiceCarouselProps<T> {
 /**
  * ChoiceCarousel — a horizontal, scroll-snapped row of options to pick one (radiogroup) or several (group of
  * checkboxes); the options are drawn by `renderCard`. On a wide screen two outline IconButtons (with their Tooltips)
- * scroll it by one option; the arrow keys do the same on the row. Styles: choice-carousel.css.
+ * scroll it by one option, each one there only while there is more that way; the arrow keys do the same on the row. Styles: choice-carousel.css.
  */
 declare function ChoiceCarousel<T>({ options, getKey, renderCard, value, onChange, multiple, ariaLabel, isDisabled, }: ChoiceCarouselProps<T>): react.JSX.Element;
 

package/dist/components/choice-carousel.js

@@ -75,7 +75,7 @@ function ChoiceCarousel({
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "rds-choice-carousel", children: [
-    /* @__PURE__ */ jsx(Tooltip, { text: "Anterior", children: /* @__PURE__ */ jsx(
+    canScrollLeft && /* @__PURE__ */ jsx(Tooltip, { text: "Anterior", children: /* @__PURE__ */ jsx(
       IconButton,
       {
         className: "rds-choice-carousel__arrow rds-choice-carousel__arrow--prev",
@@ -84,7 +84,6 @@ function ChoiceCarousel({
         variant: "outline",
         tone: "neutral",
         onClick: () => scrollByAmount(-1),
-        disabled: !canScrollLeft,
         tabIndex: -1
       }
     ) }),
@@ -123,7 +122,7 @@ function ChoiceCarousel({
         })
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { text: "Pr\xF3ximo", children: /* @__PURE__ */ jsx(
+    canScrollRight && /* @__PURE__ */ jsx(Tooltip, { text: "Pr\xF3ximo", children: /* @__PURE__ */ jsx(
       IconButton,
       {
         className: "rds-choice-carousel__arrow rds-choice-carousel__arrow--next",
@@ -132,7 +131,6 @@ function ChoiceCarousel({
         variant: "outline",
         tone: "neutral",
         onClick: () => scrollByAmount(1),
-        disabled: !canScrollRight,
         tabIndex: -1
       }
     ) })

package/dist/components/choice-list.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+interface ChoiceListProps extends Omit<ComponentPropsWithRef<'ul'>, 'children' | 'defaultValue' | 'onChange'> {
+    /** The ChoiceListItems (Figma: the slot `items`). */
+    children: ReactNode;
+    /** Controlled: the chosen row's value. */
+    value?: string;
+    /** Uncontrolled: the row chosen at first. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * ChoiceList — Figma [RDS] Content/ChoiceList. A dense list to choose one thing from: a client, a product, an
+ * order. Each row is media, a title, a muted description and a trailing value; a line under each row, dozens on
+ * screen. One chosen at a time, marked by the tint and a bar on the left (role listbox, aria-selected). The list
+ * takes the focus: the arrows move the active row past disabled ones, Home and End go to the ends, Enter or Space
+ * choose, a click chooses. Name it with aria-label or aria-labelledby. Styles: choice-list.css.
+ *
+ * Not for 2 to 4 options that need an explanation (ChoiceCard), nor for a list that only shows (Item).
+ */
+declare function ChoiceList({ children, value, defaultValue, onValueChange, className, onKeyDown, onFocus, ref, ...rest }: ChoiceListProps): react.JSX.Element;
+interface ChoiceListItemProps {
+    /** The value it stands for. */
+    value: string;
+    /** The name, one line (Figma: `title`). It is the row's accessible name. */
+    title: ReactNode;
+    /** One muted line under the title (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** An Avatar for a person, a Tile for a thing, 32 (Figma: `showMedia` + `media`). Decorative: hidden from screen readers. */
+    media?: ReactNode;
+    /** A value or a date on the right (Figma: `showTrailing` + `trailing`). */
+    trailing?: ReactNode;
+    /** Cannot be chosen now: skipped by the arrows, read as unavailable. */
+    disabled?: boolean;
+}
+/** One row of the ChoiceList (Figma: .choice-list/item). The whole row is the target. */
+declare function ChoiceListItem({ value, title, description, media, trailing, disabled }: ChoiceListItemProps): react.JSX.Element;
+
+export { ChoiceList, ChoiceListItem, type ChoiceListItemProps, type ChoiceListProps };

package/dist/components/choice-list.js

@@ -0,0 +1,122 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { warnIfUnlabelled } from "./internal/field.js";
+const ChoiceListContext = createContext(null);
+function ChoiceList(_a) {
+  var _b = _a, { children, value, defaultValue, onValueChange, className, onKeyDown, onFocus, ref } = _b, rest = __objRest(_b, ["children", "value", "defaultValue", "onValueChange", "className", "onKeyDown", "onFocus", "ref"]);
+  warnIfUnlabelled("ChoiceList", void 0, rest["aria-label"], rest["aria-labelledby"]);
+  const [own, setOwn] = useState(defaultValue);
+  const selected = value !== void 0 ? value : own;
+  const [activeId, setActiveId] = useState(null);
+  const list = useRef(null);
+  const rows = () => {
+    var _a2, _b2;
+    return Array.from((_b2 = (_a2 = list.current) == null ? void 0 : _a2.querySelectorAll('[role="option"]')) != null ? _b2 : []).filter(
+      (o) => o.getAttribute("aria-disabled") !== "true"
+    );
+  };
+  function choose(next) {
+    if (value === void 0) setOwn(next);
+    onValueChange == null ? void 0 : onValueChange(next);
+  }
+  function activate(row) {
+    if (!row) return;
+    setActiveId(row.id);
+    row.scrollIntoView({ block: "nearest" });
+  }
+  function keyDown(event) {
+    var _a2;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    const all = rows();
+    const index = all.findIndex((o) => o.id === activeId);
+    const moves = {
+      ArrowDown: () => all[Math.min(index + 1, all.length - 1)],
+      ArrowUp: () => all[Math.max(index - 1, 0)],
+      Home: () => all[0],
+      End: () => all[all.length - 1]
+    };
+    if (moves[event.key]) {
+      event.preventDefault();
+      activate(moves[event.key]());
+    } else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
+      event.preventDefault();
+      choose((_a2 = all[index].dataset.value) != null ? _a2 : "");
+    }
+  }
+  function setRef(node) {
+    list.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }
+  return /* @__PURE__ */ jsx(ChoiceListContext.Provider, { value: { selected, activeId, setActiveId, choose }, children: /* @__PURE__ */ jsx(
+    "ul",
+    __spreadProps(__spreadValues({
+      tabIndex: 0
+    }, rest), {
+      ref: setRef,
+      role: "listbox",
+      "aria-activedescendant": activeId != null ? activeId : void 0,
+      className: ["rds-choice-list", className].filter(Boolean).join(" "),
+      onKeyDown: keyDown,
+      onFocus: (event) => {
+        var _a2;
+        onFocus == null ? void 0 : onFocus(event);
+        if (activeId && document.getElementById(activeId)) return;
+        const all = rows();
+        activate((_a2 = all.find((o) => o.dataset.value === selected)) != null ? _a2 : all[0]);
+      },
+      children
+    })
+  ) });
+}
+function ChoiceListItem({ value, title, description, media, trailing, disabled }) {
+  const context = useContext(ChoiceListContext);
+  const id = useId();
+  if (!context) throw new Error("[@rojaostudio/ds] ChoiceListItem goes inside a ChoiceList.");
+  const selected = context.selected === value;
+  const describedBy = [description != null && `${id}-description`, trailing != null && `${id}-trailing`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id,
+      role: "option",
+      "data-value": value,
+      "aria-selected": selected,
+      "aria-disabled": disabled || void 0,
+      "aria-labelledby": `${id}-title`,
+      "aria-describedby": describedBy || void 0,
+      "data-active": context.activeId === id ? "" : void 0,
+      className: "rds-choice-list__item",
+      onClick: () => {
+        if (disabled) return;
+        context.setActiveId(id);
+        context.choose(value);
+      },
+      children: [
+        media != null && /* @__PURE__ */ jsx("span", { className: "rds-choice-list__media", "aria-hidden": "true", children: media }),
+        /* @__PURE__ */ jsxs("span", { className: "rds-choice-list__content", children: [
+          /* @__PURE__ */ jsx("span", { id: `${id}-title`, className: "rds-choice-list__title", children: title }),
+          description != null && /* @__PURE__ */ jsx("span", { id: `${id}-description`, className: "rds-choice-list__description", children: description })
+        ] }),
+        trailing != null && /* @__PURE__ */ jsx("span", { id: `${id}-trailing`, className: "rds-choice-list__trailing", children: trailing })
+      ]
+    }
+  );
+}
+export {
+  ChoiceList,
+  ChoiceListItem
+};

package/dist/components/choice-preview-card.d.ts

@@ -9,18 +9,12 @@ interface ChoicePreviewCardProps {
     preview: ReactNode;
     label: string;
     description?: string;
-    /** Ignored: the ChoiceCard has no locked state. */
-    locked?: boolean;
     disabled?: boolean;
-    /** Ignored: the ChoiceCard has no badge on the picture. */
-    badge?: ReactNode;
-    /** Ignored: the picture is always 16:9. */
-    previewAspect?: 'square' | 'video' | 'wide';
     className?: string;
 }
 /**
  * @deprecated Use ChoiceCard with layout="preview" (Figma [RDS] Content/ChoiceCard). A thin wrapper over it: `label`
- * is the children. It is a native radio now, not a toggle button; `locked`, `badge` and `previewAspect` are ignored.
+ * is the children. It is a native radio now, not a toggle button (`locked`, `badge` and `previewAspect` left in 2.0).
  */
 declare function ChoicePreviewCard({ selected, onSelect, preview, label, description, disabled, className }: ChoicePreviewCardProps): react.JSX.Element;
 

package/dist/components/color-input.d.ts

@@ -35,7 +35,7 @@ declare function normalizeHex(text: string): string | null;
 /**
  * ColorInput — Figma [RDS] Forms/ColorInput. One colour, chosen or typed: the swatch shows it and the hex beside it
  * is editable (#RRGGBB, with or without #). The swatch opens a popover with the palette the caller passes (Figma:
- * menu=open); without one, the system's colour picker. Enter or leaving the field confirms the hex; an invalid hex
+ * open=true); without one, the system's colour picker. Enter or leaving the field confirms the hex; an invalid hex
  * goes back to the last valid one. The swatch's colour is the person's data, not a token: it is the one inline
  * style the DS allows (style.backgroundColor of the swatch and of each palette colour). Choosing among a few fixed
  * colours without a hex is the ToggleGroup or the ChoiceCard. Styles: color-input.css and internal/field.css.

package/dist/components/context-menu.d.ts

@@ -28,8 +28,11 @@ declare function ContextMenu({ children, items, disabled, onOpenChange, classNam
 interface ContextMenuItemProps extends MenuItemContentProps {
     /** Runs when the item is chosen; the menu then closes. */
     onSelect?: () => void;
-    /** danger for what destroys: last, after a separator. */
-    tone?: ContextMenuItemTone;
+    /**
+     * neutral (default), or danger for what destroys: last, after a separator (Figma: `tone`). `'default'` is
+     * deprecated (2.0.0-next): it is `'neutral'`.
+     */
+    tone?: ContextMenuItemTone | 'default';
     disabled?: boolean;
     textValue?: string;
 }

package/dist/components/currency-input.d.ts

@@ -30,8 +30,6 @@ interface CurrencyInputProps {
     maxDigits?: number;
     /** Shows 0,00 instead of the placeholder when the value is zero. */
     showZero?: boolean;
-    /** @deprecated The [RDS] Input has one height (44). Ignored. */
-    size?: 'sm' | 'md' | 'lg';
     id?: string;
     className?: string;
 }

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

@@ -20,35 +20,53 @@ type DataTableFilterDef = {
     options: DataTableFilterOption[];
     onChange: (v: string) => void;
 };
-type DataTablePillDef = {
-    key: string;
-    label: string;
-    active: boolean;
-    count?: number;
-    onClick: () => void;
-};
 type DataTableHeaderProps = {
     search?: DataTableHeaderSearch;
     filters?: DataTableFilterDef[];
-    /** Quick filters, always in view: FilterChips. */
-    pillFilters?: DataTablePillDef[];
+    /**
+     * 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".
+     */
+    quickFilters?: ReactNode;
+    /** Clears the `filters` (the quick filters are cleared where they are, in view). */
     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.
+     */
+    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;
-    /** On a narrow screen, moves the filters and the actions into a Drawer. The quick filters stay in view. */
+    /** In the compact arrangement (bar below 1024), moves the filters and the actions into a Drawer. The quick filters stay in view. */
     mobileCollapse?: boolean;
 };
-/** One filter as a DropdownMenu of radio items (one filter on a wide screen). */
+/** One filter as a DropdownMenu of radio items (one filter, expanded). */
 declare function FilterDropdown({ f, placement }: {
     f: DataTableFilterDef;
     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. The search fills the row; quick filters are FilterChips; one filter is a
- * dropdown, two or more collapse into "Filtros" (the active ones stay in view as removable Chips). From 768 the
- * wide layout shows; below it, the filters open in a Drawer or a Popover. Styles: data-table-header.css.
+ * 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.
+ *
+ * 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.
+ * Styles: data-table-header.css.
  */
-declare function DataTableHeader({ search, filters, pillFilters, onClear, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
+declare function DataTableHeader({ search, filters, quickFilters, onClear, view, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
 
-export { type DataTableFilterDef, type DataTableFilterOption, DataTableHeader, type DataTableHeaderProps, type DataTableHeaderSearch, type DataTablePillDef, FilterDropdown };
+export { type DataTableFilterDef, type DataTableFilterOption, DataTableHeader, type DataTableHeaderProps, type DataTableHeaderSearch, FilterDropdown };