@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/currency-input.js

@@ -1,7 +1,8 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Input } from "./input.js";
 const CURRENCY_LOCALE = {
   BRL: "pt-BR",
   USD: "en-US",
@@ -36,16 +37,6 @@ function resolveCurrency(currency, explicitLocale) {
     return { symbol: currency, decimals: 2, locale };
   }
 }
-const SIZE_INPUT = {
-  sm: "h-control-sm text-caption pl-7  pr-3",
-  md: "h-control-md text-label pl-9  pr-3",
-  lg: "h-control-lg text-body pl-10 pr-3"
-};
-const SIZE_SYMBOL = {
-  sm: "left-2.5 text-caption",
-  md: "left-3   text-label",
-  lg: "left-3.5 text-body"
-};
 function formatSubunits(subunits, decimals, locale) {
   const divisor = Math.pow(10, decimals);
   const decimal = subunits / divisor;
@@ -56,6 +47,7 @@ function formatSubunits(subunits, decimals, locale) {
 }
 function CurrencyInput({
   label,
+  "aria-label": ariaLabel,
   name,
   currency,
   symbol: symbolProp,
@@ -64,82 +56,54 @@ function CurrencyInput({
   defaultValueSubunits,
   placeholder,
   disabled,
+  required,
+  hint,
+  errorMessage,
   onChange,
   maxDigits = 10,
   showZero = false,
-  size = "md",
-  className = ""
+  id,
+  className
 }) {
-  const id = useId();
-  const inputRef = useRef(null);
   const [subunits, setSubunits] = useState(defaultValueSubunits != null ? defaultValueSubunits : 0);
   const { symbol, decimals, locale } = useMemo(() => {
     if (currency) {
       const resolved = resolveCurrency(currency, localeProp);
-      return {
-        symbol: symbolProp != null ? symbolProp : resolved.symbol,
-        decimals: decimalsProp != null ? decimalsProp : resolved.decimals,
-        locale: resolved.locale
-      };
+      return { symbol: symbolProp != null ? symbolProp : resolved.symbol, decimals: decimalsProp != null ? decimalsProp : resolved.decimals, locale: resolved.locale };
     }
-    return {
-      symbol: symbolProp != null ? symbolProp : "$",
-      decimals: decimalsProp != null ? decimalsProp : 2,
-      locale: localeProp != null ? localeProp : "en-US"
-    };
+    return { symbol: symbolProp != null ? symbolProp : "$", decimals: decimalsProp != null ? decimalsProp : 2, locale: localeProp != null ? localeProp : "en-US" };
   }, [currency, symbolProp, decimalsProp, localeProp]);
-  function update(next) {
+  function change(event) {
+    if (disabled) return;
+    const digits = event.target.value.replace(/\D/g, "").slice(0, maxDigits);
+    const next = digits === "" ? 0 : parseInt(digits, 10);
     setSubunits(next);
     onChange == null ? void 0 : onChange(next);
   }
-  function handleChange(e) {
-    if (disabled) return;
-    const digits = e.target.value.replace(/\D/g, "").slice(0, maxDigits);
-    update(digits === "" ? 0 : parseInt(digits, 10));
-  }
-  const isEmpty = subunits === 0 && !showZero;
-  const displayValue = isEmpty ? "" : formatSubunits(subunits, decimals, locale);
-  const placeholderText = placeholder != null ? placeholder : formatSubunits(0, decimals, locale);
-  const control = /* @__PURE__ */ jsxs("div", { className: ["relative flex items-center", label ? "" : className].join(" "), children: [
+  const empty = subunits === 0 && !showZero;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      "span",
+      Input,
       {
-        className: [
-          "absolute select-none pointer-events-none",
-          SIZE_SYMBOL[size],
-          disabled ? "text-fg-disabled" : "text-fg-muted"
-        ].join(" "),
-        children: symbol
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
         id,
+        label,
+        "aria-label": ariaLabel,
+        prefix: symbol,
         type: "text",
         inputMode: "numeric",
-        value: displayValue,
-        placeholder: placeholderText,
-        onChange: handleChange,
+        autoComplete: "off",
+        value: empty ? "" : formatSubunits(subunits, decimals, locale),
+        placeholder: placeholder != null ? placeholder : formatSubunits(0, decimals, locale),
+        onChange: change,
         disabled,
-        className: [
-          "w-full rounded-(--radius-control) border border-stroke-control bg-surface-default",
-          "placeholder:text-fg-placeholder",
-          "focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-          "transition-colors",
-          SIZE_INPUT[size],
-          disabled ? "bg-surface-raised text-fg-disabled cursor-not-allowed" : "text-fg-primary cursor-text"
-        ].join(" ")
+        required,
+        hint,
+        errorMessage,
+        className: ["rds-currency-input", className].filter(Boolean).join(" ")
       }
     ),
     /* @__PURE__ */ jsx("input", { type: "hidden", name, value: subunits })
   ] });
-  if (!label) return control;
-  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", className].join(" "), children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-label font-medium text-fg-primary", children: label }),
-    control
-  ] });
 }
 export {
   CurrencyInput

package/dist/components/danger-zone.d.ts

@@ -2,19 +2,28 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface DangerZoneProps {
+    /** The zone's title (the CardHeader's, an h2), such as "Zona de risco". */
     title?: string;
+    /** One line under the title. */
     description?: string;
+    /** The DangerZoneItems. */
     children: ReactNode;
     className?: string;
 }
+/**
+ * DangerZone — a composition of the Card, its CardHeader with a danger Tile, and Items (Figma [RDS] Content): the
+ * irreversible actions of a settings page (delete the account, unpublish). The title stays neutral; the Tile and
+ * each item's danger Button say the risk. Styles: danger-zone.css.
+ */
 declare function DangerZone({ title, description, children, className }: DangerZoneProps): react.JSX.Element;
 interface DangerZoneItemProps {
     title: ReactNode;
     description?: ReactNode;
-    /** Ação à direita — normalmente um Button variant="outline" color="danger" size="sm". */
+    /** The action on the right: a Button tone="danger" variant="outline". */
     action?: ReactNode;
     className?: string;
 }
+/** One irreversible action: an Item with its title, what it does and the danger Button. */
 declare function DangerZoneItem({ title, description, action, className }: DangerZoneItemProps): react.JSX.Element;
 
 export { DangerZone, DangerZoneItem, type DangerZoneItemProps, type DangerZoneProps };

package/dist/components/danger-zone.js

@@ -1,29 +1,25 @@
-"use client";
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle } from "lucide-react";
-import { FormCardHeader } from "./form-card-header.js";
-function DangerZone({ title, description, children, className = "" }) {
-  return /* @__PURE__ */ jsxs("section", { className: ["space-y-4", className].filter(Boolean).join(" "), children: [
-    (title || description) && /* @__PURE__ */ jsx(
-      FormCardHeader,
+import { Card, CardContent, CardHeader } from "./card.js";
+import { TriangleAlertIcon } from "./internal/icons.js";
+import { Item } from "./item.js";
+import { Tile } from "./tile.js";
+function DangerZone({ title, description, children, className }) {
+  return /* @__PURE__ */ jsxs(Card, { as: title ? "section" : "div", className: ["rds-danger-zone", className].filter(Boolean).join(" "), children: [
+    title && /* @__PURE__ */ jsx(
+      CardHeader,
       {
-        icon: /* @__PURE__ */ jsx(AlertTriangle, { size: 18, strokeWidth: 1.5 }),
+        titleAs: "h2",
+        icon: /* @__PURE__ */ jsx(Tile, { icon: /* @__PURE__ */ jsx(TriangleAlertIcon, {}), tone: "danger", variant: "soft" }),
         title,
-        subtitle: description
+        description
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "rounded-(--radius-card) border p-5 bg-danger-soft border-danger-border", children })
+    /* @__PURE__ */ jsx(CardContent, { className: "rds-danger-zone__items", children })
   ] });
 }
-function DangerZoneItem({ title, description, action, className = "" }) {
-  return /* @__PURE__ */ jsxs("div", { className: ["flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-(--text-primary)", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--text-muted) mt-0.5 leading-relaxed", children: description })
-    ] }),
-    action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
-  ] });
+function DangerZoneItem({ title, description, action, className }) {
+  return /* @__PURE__ */ jsx(Item, { className: ["rds-danger-zone__item", className].filter(Boolean).join(" "), title, description, action });
 }
 export {
   DangerZone,

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

@@ -1,8 +1,10 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 
 type DataTableHeaderSearch = {
     value: string;
     onChange: (v: string) => void;
+    /** Also the field's accessible name. Default "Buscar…". */
     placeholder?: string;
 };
 type DataTableFilterOption = {
@@ -13,6 +15,7 @@ type DataTableFilterOption = {
 type DataTableFilterDef = {
     key: string;
     label: string;
+    /** The chosen option; '' is "all" (no filter). */
     value: string;
     options: DataTableFilterOption[];
     onChange: (v: string) => void;
@@ -27,17 +30,25 @@ type DataTablePillDef = {
 type DataTableHeaderProps = {
     search?: DataTableHeaderSearch;
     filters?: DataTableFilterDef[];
+    /** Quick filters, always in view: FilterChips. */
     pillFilters?: DataTablePillDef[];
     onClear?: () => void;
-    actions?: React.ReactNode;
+    actions?: ReactNode;
     className?: string;
-    /** Em mobile, move filters + actions para um BottomSheet. pillFilters sempre visíveis. */
+    /** On a narrow screen, 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). */
 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.
+ */
 declare function DataTableHeader({ search, filters, pillFilters, onClear, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
 
 export { type DataTableFilterDef, type DataTableFilterOption, DataTableHeader, type DataTableHeaderProps, type DataTableHeaderSearch, type DataTablePillDef, FilterDropdown };

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

@@ -1,94 +1,41 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { ChevronDown, ListFilter, SlidersHorizontal, X } from "lucide-react";
-import { FilterChip } from "./filter-chip.js";
-import { Search } from "./search.js";
-import { Divider } from "./divider.js";
+import { Badge } from "./badge.js";
+import { Button } from "./button.js";
+import { Chip } from "./chip.js";
+import { Drawer } from "./drawer.js";
+import { DropdownMenu, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "./dropdown-menu.js";
+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 { Popover } from "./popover.js";
-import { BottomSheet } from "./bottom-sheet.js";
-const optCls = (selected) => `w-full text-left text-label px-3 py-1.5 rounded-(--radius-card) transition-colors flex items-center justify-between gap-2 ${selected ? "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:bg-surface-raised"}`;
-function triggerCls(isActive) {
-  const base = "h-control-md flex items-center gap-1 px-3 text-label font-medium rounded-(--radius-control) border transition-colors";
-  if (isActive) return `${base} border-brand-primary bg-brand-primary text-brand-on-primary`;
-  return `${base} border-stroke-default bg-surface-default text-fg-muted hover:bg-surface-raised hover:border-stroke-strong`;
-}
-function getOptionLabel(filter) {
-  var _a;
+import { Separator } from "./separator.js";
+import { Tooltip } from "./tooltip.js";
+function optionLabel(filter) {
+  var _a, _b;
   if (filter.value === "") return filter.label;
-  const opt = filter.options.find((o) => o.value === filter.value);
-  return (_a = opt == null ? void 0 : opt.label) != null ? _a : filter.label;
+  return (_b = (_a = filter.options.find((o) => o.value === filter.value)) == null ? void 0 : _a.label) != null ? _b : filter.label;
 }
-function FilterDropdown({ f, placement = "bottom-start" }) {
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      placement,
-      trigger: /* @__PURE__ */ jsxs("button", { type: "button", className: triggerCls(f.value !== ""), children: [
-        getOptionLabel(f),
-        /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
-      ] }),
-      children: ({ close }) => /* @__PURE__ */ jsx("div", { className: "w-36 rounded-(--radius-card) border border-stroke-default bg-surface-default shadow-xl p-1 overflow-hidden", children: f.options.map((opt) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            f.onChange(opt.value);
-            close();
-          },
-          className: optCls(f.value === opt.value),
-          children: [
-            /* @__PURE__ */ jsx("span", { children: opt.label }),
-            opt.count != null && /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums", children: opt.count })
-          ]
-        },
-        opt.value
-      )) })
-    }
-  );
+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) }));
 }
-function MobileSingleFilter({ f }) {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("button", { type: "button", className: triggerCls(f.value !== ""), onClick: () => setOpen(true), children: [
-      getOptionLabel(f),
-      /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
-    ] }),
-    /* @__PURE__ */ jsx(BottomSheet, { open, onClose: () => setOpen(false), title: f.label, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: f.options.map((opt) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          f.onChange(opt.value);
-          setOpen(false);
-        },
-        className: optCls(f.value === opt.value),
-        children: [
-          /* @__PURE__ */ jsx("span", { children: opt.label }),
-          opt.count != null && /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums", children: opt.count })
-        ]
-      },
-      opt.value
-    )) }) })
-  ] });
+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)) }) });
 }
-function FiltersButton({ count, onClick }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      "data-filter-toggle": true,
-      onClick,
-      className: `h-control-md flex items-center gap-1.5 px-3 text-label border rounded-(--radius-control) transition-colors ${count > 0 ? "bg-brand-primary text-brand-on-primary border-brand-primary" : "bg-surface-default text-fg-muted border-stroke-default hover:bg-surface-raised"}`,
-      children: [
-        /* @__PURE__ */ jsx(SlidersHorizontal, { size: 14 }),
-        "Filtros",
-        count > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-surface-default text-fg-primary text-[10px] font-bold", children: count })
-      ]
-    }
-  );
+function FiltersButton(_c) {
+  var _d = _c, { count } = _d, rest = __objRest(_d, ["count"]);
+  return /* @__PURE__ */ jsxs(Button, __spreadProps(__spreadValues({}, rest), { tone: "neutral", variant: count > 0 ? "fill" : "outline", icon: /* @__PURE__ */ jsx(SlidersIcon, {}), "data-filter-toggle": "", children: [
+    "Filtros",
+    count > 0 && /* @__PURE__ */ jsx(Badge, { value: count, tone: "neutral", variant: "soft" })
+  ] }));
 }
 function FilterGroups({
   filters,
@@ -96,32 +43,52 @@ function FilterGroups({
   onClear,
   showClear
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    filters.map((f) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold text-fg-disabled uppercase tracking-wide mb-2", children: f.label }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: f.options.map((opt) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onPick(f, opt.value),
-          className: optCls(f.value === opt.value),
-          children: [
-            /* @__PURE__ */ jsx("span", { children: opt.label }),
-            opt.count != null && /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums", children: opt.count })
-          ]
-        },
-        opt.value
-      )) })
+  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, { active: f.value === opt.value, count: opt.count, onClick: () => onPick(f, opt.value), children: opt.label }, opt.value)) })
     ] }, f.key)),
-    onClear && showClear && /* @__PURE__ */ jsx(
-      "button",
+    onClear && showClear && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", onClick: onClear, children: "Limpar filtros" })
+  ] });
+}
+function FiltersPopover({
+  filters,
+  onClear,
+  showClear,
+  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,
+    {
+      filters,
+      onPick: (f, v) => {
+        f.onChange(v);
+        setOpen(false);
+      },
+      onClear: onClear ? () => {
+        onClear();
+        setOpen(false);
+      } : void 0,
+      showClear
+    }
+  ) }) });
+}
+function MobileSingleFilter({ f }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FilterTrigger, { filter: f, onClick: () => setOpen(true) }),
+    /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, title: f.label, children: /* @__PURE__ */ jsx(
+      FilterGroups,
       {
-        type: "button",
-        onClick: onClear,
-        className: "w-full text-center text-caption text-fg-disabled hover:text-fg-secondary underline underline-offset-2 pt-1",
-        children: "Limpar filtros"
+        filters: [f],
+        onPick: (_, v) => {
+          f.onChange(v);
+          setOpen(false);
+        },
+        showClear: false
       }
-    )
+    ) })
   ] });
 }
 function DataTableHeader({
@@ -130,104 +97,61 @@ function DataTableHeader({
   pillFilters = [],
   onClear,
   actions,
-  className = "",
+  className,
   mobileCollapse = false
 }) {
-  var _a;
+  var _a, _b;
   const [sheetOpen, setSheetOpen] = useState(false);
   const activeFilterCount = filters.filter((f) => f.value !== "").length + pillFilters.filter((p) => p.active).length;
   const collapseDesktop = filters.length >= 2;
   const activeFilters = filters.filter((f) => f.value !== "");
   const singleFilter = filters.length === 1 ? filters[0] : null;
-  return /* @__PURE__ */ jsxs("div", { className: ["flex items-center gap-2 mb-3", className].filter(Boolean).join(" "), children: [
-    search && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
-      Search,
+  const lead = Boolean(search || pillFilters.length > 0);
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-data-table-header", className].filter(Boolean).join(" "), children: [
+    search && /* @__PURE__ */ jsx(
+      Input,
       {
-        size: "md",
+        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),
-        onClear: () => search.onChange(""),
-        placeholder: (_a = search.placeholder) != null ? _a : "Buscar..."
-      }
-    ) }),
-    pillFilters.length > 0 && /* @__PURE__ */ jsx("div", { "data-pill-filter": true, className: "flex items-center [gap:var(--filter-chip-group-gap)] flex-wrap", children: pillFilters.map((p) => /* @__PURE__ */ jsx(
-      FilterChip,
-      {
-        label: p.label,
-        active: p.active,
-        count: p.count,
-        onClick: p.onClick
-      },
-      p.key
-    )) }),
-    filters.length > 0 && !collapseDesktop && /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center gap-1.5", children: [
-      (search || pillFilters.length > 0) && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", className: "mx-0.5" }),
-      /* @__PURE__ */ jsx(ListFilter, { size: 14, className: "text-fg-disabled shrink-0" }),
-      filters.map((f) => /* @__PURE__ */ jsx(FilterDropdown, { f }, f.key))
-    ] }),
-    collapseDesktop && /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center gap-1.5", children: [
-      (search || pillFilters.length > 0) && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", className: "mx-0.5" }),
-      activeFilters.map((f) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => f.onChange(""),
-          title: f.label,
-          className: triggerCls(true),
-          children: [
-            getOptionLabel(f),
-            /* @__PURE__ */ jsx(X, { size: 12 })
-          ]
-        },
-        f.key
-      )),
-      /* @__PURE__ */ jsx(Popover, { placement: "bottom-end", trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount }), children: ({ close }) => /* @__PURE__ */ jsx("div", { className: "bg-surface-default border border-stroke-default rounded-(--radius-card) shadow-lg p-4 w-56 max-h-[70vh] overflow-y-auto", children: /* @__PURE__ */ jsx(
-        FilterGroups,
-        {
-          filters,
-          onPick: (f, v) => {
-            f.onChange(v);
-            close();
-          },
-          onClear: onClear ? () => {
-            onClear();
-            close();
-          } : void 0,
-          showClear: activeFilterCount > 0
-        }
-      ) }) })
-    ] }),
-    onClear && activeFilterCount > 0 && !collapseDesktop && /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        icon: /* @__PURE__ */ jsx(X, { size: 13 }),
-        "aria-label": "Limpar filtros",
-        size: "sm",
-        variant: "ghost",
-        color: "neutral",
-        className: "hidden md:inline-flex",
-        onClick: onClear
+        onChange: (e) => search.onChange(e.target.value)
       }
     ),
-    singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(MobileSingleFilter, { f: singleFilter }) }),
-    !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(Popover, { placement: "bottom-end", trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount }), children: ({ close }) => /* @__PURE__ */ jsx("div", { className: "bg-surface-default border border-stroke-default rounded-(--radius-card) shadow-lg p-4 w-52", children: /* @__PURE__ */ jsx(
-      FilterGroups,
+    pillFilters.length > 0 && /* @__PURE__ */ jsx(FilterChipGroup, { "aria-label": "Filtros r\xE1pidos", "data-pill-filter": "", children: pillFilters.map((p) => /* @__PURE__ */ jsx(FilterChip, { active: p.active, count: p.count, onClick: p.onClick, children: p.label }, p.key)) }),
+    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,
-        onPick: (f, v) => {
-          f.onChange(v);
-          close();
-        },
-        onClear: onClear ? () => {
-          onClear();
-          close();
-        } : void 0,
-        showClear: activeFilterCount > 0
+        onClear,
+        showClear: activeFilterCount > 0,
+        trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
       }
-    ) }) }) }),
-    mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
+    ) }),
+    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(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(Drawer, { open: sheetOpen, onOpenChange: setSheetOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
         /* @__PURE__ */ jsx(
           FilterGroups,
           {
@@ -243,10 +167,10 @@ function DataTableHeader({
             showClear: activeFilterCount > 0
           }
         ),
-        actions && /* @__PURE__ */ jsx("div", { className: "pt-2 border-t border-stroke-default", children: actions })
+        actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
       ] }) })
     ] }),
-    mobileCollapse ? /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center", children: actions }) : actions
+    actions && /* @__PURE__ */ jsx("div", { className: mobileCollapse ? "rds-data-table-header__wide" : "rds-data-table-header__actions", children: actions })
   ] });
 }
 export {