@rojaostudio/ds 2.0.0-next.17 → 2.0.0-next.18

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

@@ -32,15 +32,15 @@ type DataTableHeaderProps = {
     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 on a narrow screen too.
+     * Checkbox "Agrupar por produto". In view in the compact arrangement too.
      */
     view?: ReactNode;
     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';
@@ -50,8 +50,13 @@ declare function FilterDropdown({ f, placement }: {
  * the Drawer: the bar above a table. The search is always on the left and takes the free width (at least 320); the
  * filters are always on the right; what does not fit wraps. Quick filters go in the `quickFilters` slot; one filter
  * 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. From 768 the wide layout shows; below it, the filters open
- * in a Drawer or a Popover. "Filtros · N" counts the active `filters`, the ones that button opens.
+ * control comes after the filters, before the actions. "Filtros · N" counts the active `filters`, the ones that
+ * button opens.
+ *
+ * Two arrangements, by the bar's own width (a size container, as the Figma's viewport mode; 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, quickFilters, onClear, view, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;

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

@@ -6,6 +6,7 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Badge } from "./badge.js";
 import { Button } from "./button.js";
 import { Chip } from "./chip.js";
 import { Drawer } from "./drawer.js";
@@ -80,10 +81,49 @@ function FiltersPopover({
     }
   ) }) });
 }
+function CompactFilterTrigger(_e) {
+  var _f = _e, {
+    label,
+    state,
+    indicator
+  } = _f, rest = __objRest(_f, [
+    "label",
+    "state",
+    "indicator"
+  ]);
+  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" })
+  ] });
+}
+function activeState(count) {
+  if (count === 0) return void 0;
+  return count === 1 ? "1 ativo" : `${count} ativos`;
+}
 function MobileSingleFilter({ f }) {
   const [open, setOpen] = useState(false);
+  const on = f.value !== "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FilterTrigger, { filter: f, onClick: () => setOpen(true) }),
+    /* @__PURE__ */ jsx(
+      CompactFilterTrigger,
+      {
+        label: f.label,
+        state: on ? optionLabel(f) : void 0,
+        indicator: on ? "dot" : void 0,
+        onClick: () => setOpen(true)
+      }
+    ),
     /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, title: f.label, children: /* @__PURE__ */ jsx(
       FilterGroups,
       {
@@ -153,11 +193,26 @@ function DataTableHeader({
         filters,
         onClear,
         showClear: activeFilterCount > 0,
-        trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
+        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(FiltersButton, { count: activeFilterCount, onClick: () => setSheetOpen(true) }),
+      /* @__PURE__ */ jsx(
+        CompactFilterTrigger,
+        {
+          label: "Filtros",
+          state: activeState(activeFilterCount),
+          indicator: activeFilterCount === 0 ? void 0 : filters.length === 1 ? "dot" : activeFilterCount,
+          onClick: () => setSheetOpen(true)
+        }
+      ),
       /* @__PURE__ */ jsx(Drawer, { open: sheetOpen, onOpenChange: setSheetOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
         /* @__PURE__ */ jsx(
           FilterGroups,

package/package.json

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

@@ -3585,10 +3585,17 @@ input:focus-visible + .rds-checkbox__box {
  * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
  * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table, packed to the right: the search on the left
  * takes the free width, at least 320 (never wider than the bar); the quick filters, the filters, the view control
- * and the actions follow it on the right, and what does not fit wraps. The wide parts show from 768, the narrow ones
- * below it. In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
+ * and the actions follow it on the right, and what does not fit wraps.
+ * Two arrangements, by the bar's own width (a size container, as the Figma's viewport mode; 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).
+ * In the Popover and the Drawer the filters stack 16 apart, each one a caption-sized label over its chips.
  */
 .rds-data-table-header {
+  box-sizing: border-box;
+  container-type: inline-size;
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -3614,17 +3621,55 @@ input:focus-visible + .rds-checkbox__box {
   gap: var(--space-8);
 }
 
-.rds-data-table-header__wide {
+.rds-data-table-header__narrow {
   display: none;
 }
 
-@media (min-width: 768px) {
+@container (max-width: 1023px) {
   .rds-data-table-header__wide {
-    display: flex;
+    display: none;
   }
 
   .rds-data-table-header__narrow {
-    display: none;
+    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,
+.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);
+}
+
+.rds-data-table-header__count {
+  top: calc(var(--space-4) * -1.5);
+  right: calc(var(--space-12) * -1);
+}
+
+@media (forced-colors: active) {
+  .rds-data-table-header__dot {
+    background: CanvasText;
   }
 }