@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/currency-input.js

@@ -1,6 +1,8 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-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",
@@ -35,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;
@@ -55,6 +47,7 @@ function formatSubunits(subunits, decimals, locale) {
 }
 function CurrencyInput({
   label,
+  "aria-label": ariaLabel,
   name,
   currency,
   symbol: symbolProp,
@@ -63,75 +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__ */ React.createElement("div", { className: ["relative flex items-center", label ? "" : className].join(" ") }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: [
-        "absolute select-none pointer-events-none",
-        SIZE_SYMBOL[size],
-        disabled ? "text-fg-disabled" : "text-fg-muted"
-      ].join(" ")
-    },
-    symbol
-  ), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ref: inputRef,
-      id,
-      type: "text",
-      inputMode: "numeric",
-      value: displayValue,
-      placeholder: placeholderText,
-      onChange: handleChange,
-      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(" ")
-    }
-  ), /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: subunits }));
-  if (!label) return control;
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-1.5", className].join(" ") }, /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: "text-label font-medium text-fg-primary" }, label), control);
+  const empty = subunits === 0 && !showZero;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        label,
+        "aria-label": ariaLabel,
+        prefix: symbol,
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "off",
+        value: empty ? "" : formatSubunits(subunits, decimals, locale),
+        placeholder: placeholder != null ? placeholder : formatSubunits(0, decimals, locale),
+        onChange: change,
+        disabled,
+        required,
+        hint,
+        errorMessage,
+        className: ["rds-currency-input", className].filter(Boolean).join(" ")
+      }
+    ),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name, value: subunits })
+  ] });
 }
 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,19 +1,25 @@
-"use client";
 import "../chunk-ORMEWXMH.js";
-import { AlertTriangle } from "lucide-react";
-import { FormCardHeader } from "./form-card-header.js";
-function DangerZone({ title, description, children, className = "" }) {
-  return /* @__PURE__ */ React.createElement("section", { className: ["space-y-4", className].filter(Boolean).join(" ") }, (title || description) && /* @__PURE__ */ React.createElement(
-    FormCardHeader,
-    {
-      icon: /* @__PURE__ */ React.createElement(AlertTriangle, { size: 18, strokeWidth: 1.5 }),
-      title,
-      subtitle: description
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "rounded-(--radius-card) border p-5 bg-danger-soft border-danger-border" }, children));
+import { jsx, jsxs } from "react/jsx-runtime";
+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,
+      {
+        titleAs: "h2",
+        icon: /* @__PURE__ */ jsx(Tile, { icon: /* @__PURE__ */ jsx(TriangleAlertIcon, {}), tone: "danger", variant: "soft" }),
+        title,
+        description
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { className: "rds-danger-zone__items", children })
+  ] });
 }
-function DangerZoneItem({ title, description, action, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-(--text-primary)" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-(--text-muted) mt-0.5 leading-relaxed" }, description)), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, 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,78 +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__ */ React.createElement(
-    Popover,
-    {
-      placement,
-      trigger: /* @__PURE__ */ React.createElement("button", { type: "button", className: triggerCls(f.value !== "") }, getOptionLabel(f), /* @__PURE__ */ React.createElement(ChevronDown, { size: 12 }))
-    },
-    ({ close }) => /* @__PURE__ */ React.createElement("div", { className: "w-36 rounded-(--radius-card) border border-stroke-default bg-surface-default shadow-xl p-1 overflow-hidden" }, f.options.map((opt) => /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: opt.value,
-        type: "button",
-        onClick: () => {
-          f.onChange(opt.value);
-          close();
-        },
-        className: optCls(f.value === opt.value)
-      },
-      /* @__PURE__ */ React.createElement("span", null, opt.label),
-      opt.count != null && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums" }, opt.count)
-    )))
-  );
+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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("button", { type: "button", className: triggerCls(f.value !== ""), onClick: () => setOpen(true) }, getOptionLabel(f), /* @__PURE__ */ React.createElement(ChevronDown, { size: 12 })), /* @__PURE__ */ React.createElement(BottomSheet, { open, onClose: () => setOpen(false), title: f.label }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, f.options.map((opt) => /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      key: opt.value,
-      type: "button",
-      onClick: () => {
-        f.onChange(opt.value);
-        setOpen(false);
-      },
-      className: optCls(f.value === opt.value)
-    },
-    /* @__PURE__ */ React.createElement("span", null, opt.label),
-    opt.count != null && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums" }, opt.count)
-  )))));
+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__ */ React.createElement(
-    "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"}`
-    },
-    /* @__PURE__ */ React.createElement(SlidersHorizontal, { size: 14 }),
+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__ */ React.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-surface-default text-fg-primary text-[10px] font-bold" }, count)
-  );
+    count > 0 && /* @__PURE__ */ jsx(Badge, { value: count, tone: "neutral", variant: "soft" })
+  ] }));
 }
 function FilterGroups({
   filters,
@@ -80,25 +43,53 @@ function FilterGroups({
   onClear,
   showClear
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, filters.map((f) => /* @__PURE__ */ React.createElement("div", { key: f.key }, /* @__PURE__ */ React.createElement("p", { className: "text-[11px] font-semibold text-fg-disabled uppercase tracking-wide mb-2" }, f.label), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, f.options.map((opt) => /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      key: opt.value,
-      type: "button",
-      onClick: () => onPick(f, opt.value),
-      className: optCls(f.value === opt.value)
-    },
-    /* @__PURE__ */ React.createElement("span", null, opt.label),
-    opt.count != null && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-semibold opacity-60 tabular-nums" }, opt.count)
-  ))))), onClear && showClear && /* @__PURE__ */ React.createElement(
-    "button",
+  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, { 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,
     {
-      type: "button",
-      onClick: onClear,
-      className: "w-full text-center text-caption text-fg-disabled hover:text-fg-secondary underline underline-offset-2 pt-1"
-    },
-    "Limpar filtros"
-  ));
+      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,
+      {
+        filters: [f],
+        onPick: (_, v) => {
+          f.onChange(v);
+          setOpen(false);
+        },
+        showClear: false
+      }
+    ) })
+  ] });
 }
 function DataTableHeader({
   search,
@@ -106,98 +97,81 @@ 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__ */ React.createElement("div", { className: ["flex items-center gap-2 mb-3", className].filter(Boolean).join(" ") }, search && /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
-    Search,
-    {
-      size: "md",
-      value: search.value,
-      onChange: (e) => search.onChange(e.target.value),
-      onClear: () => search.onChange(""),
-      placeholder: (_a = search.placeholder) != null ? _a : "Buscar..."
-    }
-  )), pillFilters.length > 0 && /* @__PURE__ */ React.createElement("div", { "data-pill-filter": true, className: "flex items-center [gap:var(--filter-chip-group-gap)] flex-wrap" }, pillFilters.map((p) => /* @__PURE__ */ React.createElement(
-    FilterChip,
-    {
-      key: p.key,
-      label: p.label,
-      active: p.active,
-      count: p.count,
-      onClick: p.onClick
-    }
-  ))), filters.length > 0 && !collapseDesktop && /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex items-center gap-1.5" }, (search || pillFilters.length > 0) && /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", className: "mx-0.5" }), /* @__PURE__ */ React.createElement(ListFilter, { size: 14, className: "text-fg-disabled shrink-0" }), filters.map((f) => /* @__PURE__ */ React.createElement(FilterDropdown, { key: f.key, f }))), collapseDesktop && /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex items-center gap-1.5" }, (search || pillFilters.length > 0) && /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", className: "mx-0.5" }), activeFilters.map((f) => /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      key: f.key,
-      type: "button",
-      onClick: () => f.onChange(""),
-      title: f.label,
-      className: triggerCls(true)
-    },
-    getOptionLabel(f),
-    /* @__PURE__ */ React.createElement(X, { size: 12 })
-  )), /* @__PURE__ */ React.createElement(Popover, { placement: "bottom-end", trigger: /* @__PURE__ */ React.createElement(FiltersButton, { count: activeFilterCount }) }, ({ close }) => /* @__PURE__ */ React.createElement("div", { className: "bg-surface-default border border-stroke-default rounded-(--radius-card) shadow-lg p-4 w-56 max-h-[70vh] overflow-y-auto" }, /* @__PURE__ */ React.createElement(
-    FilterGroups,
-    {
-      filters,
-      onPick: (f, v) => {
-        f.onChange(v);
-        close();
-      },
-      onClear: onClear ? () => {
-        onClear();
-        close();
-      } : void 0,
-      showClear: activeFilterCount > 0
-    }
-  )))), onClear && activeFilterCount > 0 && !collapseDesktop && /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      icon: /* @__PURE__ */ React.createElement(X, { size: 13 }),
-      "aria-label": "Limpar filtros",
-      size: "sm",
-      variant: "ghost",
-      color: "neutral",
-      className: "hidden md:inline-flex",
-      onClick: onClear
-    }
-  ), singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement(MobileSingleFilter, { f: singleFilter })), !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement(Popover, { placement: "bottom-end", trigger: /* @__PURE__ */ React.createElement(FiltersButton, { count: activeFilterCount }) }, ({ close }) => /* @__PURE__ */ React.createElement("div", { className: "bg-surface-default border border-stroke-default rounded-(--radius-card) shadow-lg p-4 w-52" }, /* @__PURE__ */ React.createElement(
-    FilterGroups,
-    {
-      filters,
-      onPick: (f, v) => {
-        f.onChange(v);
-        close();
-      },
-      onClear: onClear ? () => {
-        onClear();
-        close();
-      } : void 0,
-      showClear: activeFilterCount > 0
-    }
-  )))), mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ React.createElement("div", { className: "md:hidden" }, /* @__PURE__ */ React.createElement(FiltersButton, { count: activeFilterCount, onClick: () => setSheetOpen(true) }), /* @__PURE__ */ React.createElement(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: "Filtros" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement(
-    FilterGroups,
-    {
-      filters,
-      onPick: (f, v) => {
-        f.onChange(v);
-        setSheetOpen(false);
-      },
-      onClear: onClear ? () => {
-        onClear();
-        setSheetOpen(false);
-      } : void 0,
-      showClear: activeFilterCount > 0
-    }
-  ), actions && /* @__PURE__ */ React.createElement("div", { className: "pt-2 border-t border-stroke-default" }, actions)))), mobileCollapse ? /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex items-center" }, actions) : actions);
+  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,
+      {
+        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)
+      }
+    ),
+    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,
+        onClear,
+        showClear: activeFilterCount > 0,
+        trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
+      }
+    ) }),
+    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(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 })
+      ] }) })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: mobileCollapse ? "rds-data-table-header__wide" : "rds-data-table-header__actions", children: actions })
+  ] });
 }
 export {
   DataTableHeader,