@rojaostudio/ds 2.0.0-next.3 → 2.0.0-next.31

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

@@ -5,8 +5,7 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Badge } from "./badge.js";
+import { useRef, useState } from "react";
 import { Button } from "./button.js";
 import { Chip } from "./chip.js";
 import { Drawer } from "./drawer.js";
@@ -14,49 +13,57 @@ import { DropdownMenu, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "./d
 import { FilterChip, FilterChipGroup } from "./filter-chip.js";
 import { IconButton } from "./icon-button.js";
 import { Input } from "./input.js";
-import { ChevronDownIcon, CloseIcon, SearchIcon, SlidersIcon } from "./internal/icons.js";
+import { SearchIcon, SlidersIcon } from "./internal/icons.js";
 import { Popover } from "./popover.js";
-import { Separator } from "./separator.js";
 import { Tooltip } from "./tooltip.js";
 function optionLabel(filter) {
   var _a, _b;
   if (filter.value === "") return filter.label;
   return (_b = (_a = filter.options.find((o) => o.value === filter.value)) == null ? void 0 : _a.label) != null ? _b : filter.label;
 }
+function chipLabel(filter) {
+  return `${filter.label}: ${optionLabel(filter)}`;
+}
 function FilterTrigger(_a) {
   var _b = _a, { filter } = _b, rest = __objRest(_b, ["filter"]);
-  return /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, rest), { tone: "neutral", variant: filter.value !== "" ? "fill" : "outline", icon: /* @__PURE__ */ jsx(ChevronDownIcon, {}), children: optionLabel(filter) }));
+  const on = filter.value !== "";
+  return /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({}, rest), {
+      tone: "neutral",
+      variant: on ? "fill" : "outline",
+      icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
+      iconPosition: "start",
+      "aria-label": on ? `${filter.label}, ${optionLabel(filter)}` : void 0,
+      "data-filter-toggle": "",
+      children: filter.label
+    })
+  );
 }
 function FilterDropdown({ f, placement = "bottom-start" }) {
   return /* @__PURE__ */ jsx(DropdownMenu, { align: placement === "bottom-end" ? "end" : "start", "aria-label": f.label, trigger: /* @__PURE__ */ jsx(FilterTrigger, { filter: f }), children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: f.value, onValueChange: f.onChange, children: f.options.map((opt) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: opt.value, textValue: opt.label, children: opt.count != null ? `${opt.label} \xB7 ${opt.count}` : opt.label }, opt.value)) }) });
 }
 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" })
-  ] }));
+  return /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({}, rest), {
+      tone: "neutral",
+      variant: count > 0 ? "fill" : "outline",
+      icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
+      iconPosition: "start",
+      "data-filter-toggle": "",
+      children: count > 0 ? `Filtros \xB7 ${count}` : "Filtros"
+    })
+  );
 }
-function FilterGroups({
-  filters,
-  onPick,
-  onClear,
-  showClear
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
-    filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__group", children: [
-      /* @__PURE__ */ jsx("p", { className: "rds-data-table-header__group-label", "aria-hidden": "true", children: f.label }),
-      /* @__PURE__ */ jsx(FilterChipGroup, { "aria-label": f.label, children: f.options.map((opt) => /* @__PURE__ */ jsx(FilterChip, { 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 FilterGroups({ filters, onPick }) {
+  return /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__groups", children: filters.map((f) => /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__group", children: [
+    /* @__PURE__ */ jsx("p", { className: "rds-data-table-header__group-label", "aria-hidden": "true", children: f.label }),
+    /* @__PURE__ */ jsx(FilterChipGroup, { "aria-label": f.label, children: f.options.map((opt) => /* @__PURE__ */ jsx(FilterChip, { pressed: f.value === opt.value, count: opt.count, onClick: () => onPick(f, opt.value), children: opt.label }, opt.value)) })
+  ] }, f.key)) });
 }
-function FiltersPopover({
-  filters,
-  onClear,
-  showClear,
-  trigger
-}) {
+function FiltersPopover({ filters, trigger }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx(Popover, { trigger, "aria-label": "Filtros", side: "bottom", align: "end", open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__scroll", children: /* @__PURE__ */ jsx(
     FilterGroups,
@@ -65,19 +72,50 @@ function FiltersPopover({
       onPick: (f, v) => {
         f.onChange(v);
         setOpen(false);
-      },
-      onClear: onClear ? () => {
-        onClear();
-        setOpen(false);
-      } : void 0,
-      showClear
+      }
     }
   ) }) });
 }
+function CompactFilterTrigger(_e) {
+  var _f = _e, {
+    label,
+    state,
+    active
+  } = _f, rest = __objRest(_f, [
+    "label",
+    "state",
+    "active"
+  ]);
+  const name = state ? `${label}, ${state}` : label;
+  return /* @__PURE__ */ jsx(Tooltip, { text: label, children: active > 0 ? /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, rest), { tone: "neutral", variant: "fill", icon: /* @__PURE__ */ jsx(SlidersIcon, {}), iconPosition: "start", "aria-label": name, "data-filter-toggle": "", children: String(active) })) : /* @__PURE__ */ jsx(IconButton, __spreadProps(__spreadValues({}, rest), { icon: /* @__PURE__ */ jsx(SlidersIcon, {}), label: name, variant: "outline", tone: "neutral", size: "md", "data-filter-toggle": "" })) });
+}
+function activeState(count) {
+  if (count === 0) return void 0;
+  return count === 1 ? "1 ativo" : `${count} ativos`;
+}
+function useDrawer() {
+  const [open, setOpenState] = useState(false);
+  const triggerRef = useRef(null);
+  const setOpen = (next) => {
+    setOpenState(next);
+    if (!next) requestAnimationFrame(() => {
+      var _a;
+      return (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    });
+  };
+  const triggerProps = {
+    ref: triggerRef,
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    onClick: () => setOpen(true)
+  };
+  return { open, setOpen, triggerProps };
+}
 function MobileSingleFilter({ f }) {
-  const [open, setOpen] = useState(false);
+  const { open, setOpen, triggerProps } = useDrawer();
+  const on = f.value !== "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FilterTrigger, { filter: f, onClick: () => setOpen(true) }),
+    /* @__PURE__ */ jsx(CompactFilterTrigger, __spreadProps(__spreadValues({}, triggerProps), { label: f.label, state: on ? optionLabel(f) : void 0, active: on ? 1 : 0 })),
     /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, title: f.label, children: /* @__PURE__ */ jsx(
       FilterGroups,
       {
@@ -85,92 +123,101 @@ function MobileSingleFilter({ f }) {
         onPick: (_, v) => {
           f.onChange(v);
           setOpen(false);
-        },
-        showClear: false
+        }
       }
     ) })
   ] });
 }
+function MobileCollapsedFilters({
+  filters,
+  actions,
+  activeCount
+}) {
+  const { open, setOpen, triggerProps } = useDrawer();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CompactFilterTrigger, __spreadProps(__spreadValues({}, triggerProps), { label: "Filtros", state: activeState(activeCount), active: activeCount })),
+    /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
+      /* @__PURE__ */ jsx(
+        FilterGroups,
+        {
+          filters,
+          onPick: (f, v) => {
+            f.onChange(v);
+            setOpen(false);
+          }
+        }
+      ),
+      actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
+    ] }) })
+  ] });
+}
 function DataTableHeader({
   search,
   filters = [],
-  pillFilters = [],
+  quickFilters,
   onClear,
+  view,
+  count,
   actions,
   className,
   mobileCollapse = false
 }) {
-  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;
+  var _a, _b, _c;
+  const searchRef = useRef(null);
+  const rootRef = useRef(null);
   const activeFilters = filters.filter((f) => f.value !== "");
+  const activeFilterCount = activeFilters.length;
+  const collapseDesktop = filters.length >= 2;
   const singleFilter = filters.length === 1 ? filters[0] : null;
-  const lead = Boolean(search || 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)
+  const clear = () => {
+    onClear == null ? void 0 : onClear();
+    requestAnimationFrame(() => {
+      var _a2, _b2, _c2;
+      if (searchRef.current) {
+        searchRef.current.focus();
+        return;
       }
-    ),
-    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,
+      const toggles = (_b2 = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelectorAll("[data-filter-toggle]")) != null ? _b2 : [];
+      (_c2 = [...toggles].find((t) => t.offsetParent !== null)) == null ? void 0 : _c2.focus();
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: ["rds-data-table-header", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__tools", children: [
+        search && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__search", role: "search", "aria-label": (_a = search.label) != null ? _a : "Buscar", children: /* @__PURE__ */ jsx(
+          Input,
           {
-            filters,
-            onClear,
-            showClear: activeFilterCount > 0,
-            trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
+            ref: searchRef,
+            type: "search",
+            "aria-label": (_b = search.label) != null ? _b : "Buscar",
+            placeholder: (_c = search.placeholder) != null ? _c : "Buscar\u2026",
+            leadingIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
+            clearable: true,
+            clearLabel: "Limpar busca",
+            value: search.value,
+            onChange: (e) => search.onChange(e.target.value)
           }
-        )
-      ] }) : 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,
+        ) }),
+        quickFilters && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__quick", role: "group", "aria-label": "Filtros r\xE1pidos", children: quickFilters }),
+        filters.length > 0 && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__wide", children: collapseDesktop ? /* @__PURE__ */ jsx(FiltersPopover, { filters, trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount }) }) : filters.map((f) => /* @__PURE__ */ jsx(FilterDropdown, { f }, f.key)) }),
+        singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(MobileSingleFilter, { f: singleFilter }) }),
+        !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(
+          FiltersPopover,
           {
             filters,
-            onPick: (f, v) => {
-              f.onChange(v);
-              setSheetOpen(false);
-            },
-            onClear: onClear ? () => {
-              onClear();
-              setSheetOpen(false);
-            } : void 0,
-            showClear: activeFilterCount > 0
+            trigger: /* @__PURE__ */ jsx(CompactFilterTrigger, { label: "Filtros", state: activeState(activeFilterCount), active: activeFilterCount })
           }
-        ),
-        actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
-      ] }) })
+        ) }),
+        mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(MobileCollapsedFilters, { filters, actions, activeCount: activeFilterCount }) }),
+        view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view }),
+        count != null && count !== false && /* @__PURE__ */ jsx("span", { className: "rds-data-table-header__count", "aria-live": "polite", children: count })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: ["rds-data-table-header__actions", mobileCollapse && "rds-data-table-header__wide"].filter(Boolean).join(" "), children: actions })
     ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: mobileCollapse ? "rds-data-table-header__wide" : "rds-data-table-header__actions", children: actions })
+    activeFilters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__active", children: [
+      /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__chips", children: activeFilters.map((f) => /* @__PURE__ */ jsx(Chip, { onRemove: () => f.onChange(""), removeLabel: `Remover filtro ${chipLabel(f)}`, children: chipLabel(f) }, f.key)) }),
+      onClear && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", size: "sm", onClick: clear, children: "Limpar filtros" })
+    ] })
   ] });
 }
 export {

package/dist/components/date-picker.d.ts

@@ -30,7 +30,7 @@ interface DatePickerProps extends FieldTextProps {
 }
 /**
  * DatePicker — Figma [RDS] Forms/DatePicker. A date field that takes typing (dd/mm/aaaa, the slashes come by
- * themselves) and, from the calendar button, opens the Calendar in a popover (Figma: `menu`). Choosing a day
+ * themselves) and, from the calendar button, opens the Calendar in a popover (Figma: `open`). Choosing a day
  * closes it and gives the focus back to the field; Escape closes without choosing. For a date near today, where
  * seeing the month helps: a birth date is an Input. Styles: date-picker.css, internal/field.css, calendar.css.
  */

package/dist/components/dialog.d.ts

@@ -2,10 +2,13 @@ import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
 import * as react from 'react';
 import { ModalProps } from './internal/modal.js';
 
-type DialogSize = 'sm' | 'default' | 'lg';
+type DialogSize = 'sm' | 'md' | 'lg';
 interface DialogProps extends ModalProps {
-    /** sm 400 (a question with one field), default 560 (a short form), lg 720 (a table or a preview). */
-    size?: DialogSize;
+    /**
+     * sm 400 (a question with one field), md 560 (a short form, the default), lg 720 (a table or a preview) (Figma:
+     * `size`). `'default'` is deprecated (2.0.0-next): it is `'md'`.
+     */
+    size?: DialogSize | 'default';
 }
 /**
  * Dialog — Figma [RDS] Overlays/Dialog. A window over the screen for a short task: create, edit (Radix Dialog).

package/dist/components/dialog.js

@@ -6,8 +6,8 @@ import {
 import { jsx } from "react/jsx-runtime";
 import { ModalClose, ModalShell } from "./internal/modal.js";
 function Dialog(_a) {
-  var _b = _a, { size = "default" } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ jsx(ModalShell, __spreadValues({ prefix: "rds-dialog", modifiers: [`rds-dialog--${size}`] }, props));
+  var _b = _a, { size = "md" } = _b, props = __objRest(_b, ["size"]);
+  return /* @__PURE__ */ jsx(ModalShell, __spreadValues({ prefix: "rds-dialog", modifiers: [`rds-dialog--${size === "default" ? "md" : size}`] }, props));
 }
 const DialogClose = ModalClose;
 export {

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

@@ -30,8 +30,11 @@ declare function DropdownMenu({ trigger, children, align, side, open, defaultOpe
 interface DropdownMenuItemProps extends MenuItemContentProps {
     /** Runs when the item is chosen (click, Enter or Space); the menu then closes. A destructive action asks first (AlertDialog). */
     onSelect?: () => void;
-    /** danger for what destroys: last, after a separator (Figma: `tone`). */
-    tone?: DropdownMenuItemTone;
+    /**
+     * neutral (default), or danger for what destroys: last, after a separator (Figma: `tone`). `'default'` is
+     * deprecated (2.0.0-next): it is `'neutral'`.
+     */
+    tone?: DropdownMenuItemTone | 'default';
     /** Stays in the list, can't be chosen, and the arrows skip it. */
     disabled?: boolean;
     /** The text typing jumps by, when the label is not plain text. */

package/dist/components/dropzone.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * @deprecated Use `<FileInput variant="dropzone">` (Figma [RDS] Forms/FileInput), which has the label, the hint, the
+ * @deprecated Use `<FileInput layout="dropzone">` (Figma [RDS] Forms/FileInput), which has the label, the hint, the
  * error and the chosen file's row. Kept as a thin wrapper so 1.x code keeps compiling.
  */
 interface DropzoneProps {
@@ -17,7 +17,7 @@ interface DropzoneProps {
     'aria-label'?: string;
 }
 /**
- * @deprecated Use `<FileInput variant="dropzone">`. A drop target only: it hands the files over and stays empty,
+ * @deprecated Use `<FileInput layout="dropzone">`. A drop target only: it hands the files over and stays empty,
  * ready for the next ones, as the 1.x Dropzone did.
  */
 declare function Dropzone({ onFiles, accept, multiple, disabled, className, children, 'aria-label': ariaLabel, }: DropzoneProps): react.JSX.Element;

package/dist/components/dropzone.js

@@ -14,7 +14,7 @@ function Dropzone({
   return /* @__PURE__ */ jsx(
     FileInput,
     {
-      variant: "dropzone",
+      layout: "dropzone",
       "aria-label": ariaLabel,
       dropTitle: children,
       fileName: "",

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

@@ -2,14 +2,19 @@ import * as react from 'react';
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { FieldTextProps } from './internal/field.js';
 
-type FileInputVariant = 'field' | 'dropzone' | 'tile';
+/** The field's arrangement (Figma: `layout`). */
+type FileInputLayout = 'field' | 'dropzone' | 'tile';
+/** @deprecated Use FileInputLayout (2.0.0-next: `variant` is `layout`). */
+type FileInputVariant = FileInputLayout;
 interface FileInputProps extends Omit<FieldTextProps, 'labelPosition'>, Omit<ComponentPropsWithRef<'input'>, 'type' | 'children' | 'prefix' | 'value' | 'defaultValue' | 'size'> {
     /**
-     * The shape (Figma: `variant`). field (default): the Input's box, for a dense form. dropzone: a dashed area to drop
-     * the file on, when the file is what the screen is about (a receipt, a spreadsheet). tile: a 112 square with the image's
-     * preview, for a photo or a logo.
+     * The arrangement (Figma: `layout`). field (default): the Input's box, for a dense form. dropzone: a dashed area to
+     * drop the file on, when the file is what the screen is about (a receipt, a spreadsheet). tile: a 112 square with
+     * the image's preview, for a photo or a logo.
      */
-    variant?: FileInputVariant;
+    layout?: FileInputLayout;
+    /** @deprecated Use `layout` (2.0.0-next): the same three values. */
+    variant?: FileInputLayout;
     /** Controlled: the name shown (Figma: `fileName`). By default, the chosen file's name. */
     fileName?: string;
     /** Controlled: the size beside the name in the dropzone (Figma: `fileSize`). By default, the chosen file's, as "1,2 MB". */
@@ -43,7 +48,7 @@ interface FileInputProps extends Omit<FieldTextProps, 'labelPosition'>, Omit<Com
 /** "1,2 MB", "830 KB", "512 B": the size the way a person reads it. */
 declare function formatFileSize(bytes: number): string;
 /**
- * FileInput — Figma [RDS] Forms/FileInput. A file field in three shapes (`variant`): field, the Input's box with the
+ * FileInput — Figma [RDS] Forms/FileInput. A file field in three layouts (`layout`): field, the Input's box with the
  * clip, "Escolher arquivo" and the name; dropzone, a dashed area that takes a dragged file; tile, a square with the
  * image's preview and the buttons to swap or remove it. In every shape the native <input type="file"> does the work:
  * it lies transparent over the box, so a click, Enter or Space open the system's chooser, the label names it,
@@ -51,6 +56,6 @@ declare function formatFileSize(bytes: number): string;
  * size in the hint and check them in code (a failure is the errorMessage). Styles: file-input.css and
  * internal/field.css.
  */
-declare function FileInput({ variant, label, hint, error, errorMessage, required, fileName, fileSize, preview, previewAlt, dropTitle, tileText, clearable, onClear, onFiles, clearLabel, replaceLabel, chooseLabel, emptyLabel, id, disabled, className, style, onChange, ref, ...input }: FileInputProps): react.JSX.Element;
+declare function FileInput({ layout: layoutProp, variant, label, hint, error, errorMessage, required, fileName, fileSize, preview, previewAlt, dropTitle, tileText, clearable, onClear, onFiles, clearLabel, replaceLabel, chooseLabel, emptyLabel, id, disabled, className, style, onChange, ref, ...input }: FileInputProps): react.JSX.Element;
 
-export { FileInput, type FileInputProps, type FileInputVariant, formatFileSize };
+export { FileInput, type FileInputLayout, type FileInputProps, type FileInputVariant, formatFileSize };

package/dist/components/file-input.js

@@ -25,7 +25,8 @@ function formatFileSize(bytes) {
 }
 function FileInput(_a) {
   var _b = _a, {
-    variant = "field",
+    layout: layoutProp,
+    variant,
     label,
     hint,
     error,
@@ -51,6 +52,7 @@ function FileInput(_a) {
     onChange,
     ref
   } = _b, input = __objRest(_b, [
+    "layout",
     "variant",
     "label",
     "hint",
@@ -77,23 +79,24 @@ function FileInput(_a) {
     "onChange",
     "ref"
   ]);
-  var _a2, _b2, _c;
+  var _a2, _b2, _c, _d;
+  const layout = (_a2 = layoutProp != null ? layoutProp : variant) != null ? _a2 : "field";
   warnIfUnlabelled("FileInput", label, input["aria-label"], input["aria-labelledby"]);
-  const inside = variant === "dropzone";
+  const inside = layout === "dropzone";
   const ids = useFieldIds(id, inside ? void 0 : hint, error, errorMessage);
   const { controlId, errorId, invalid } = ids;
   const own = useRef(null);
   const [chosen, setChosen] = useState(null);
   const [dragging, setDragging] = useState(false);
   useEffect(() => () => revoke(chosen), [chosen]);
-  const shownName = (_a2 = fileName != null ? fileName : chosen == null ? void 0 : chosen.name) != null ? _a2 : "";
+  const shownName = (_b2 = fileName != null ? fileName : chosen == null ? void 0 : chosen.name) != null ? _b2 : "";
   const shownSize = fileSize != null ? fileSize : fileName === void 0 && chosen ? formatFileSize(chosen.size) : void 0;
-  const shownPreview = (_b2 = preview != null ? preview : chosen == null ? void 0 : chosen.url) != null ? _b2 : "";
-  const filled = variant === "tile" ? Boolean(shownPreview) : Boolean(shownName);
+  const shownPreview = (_c = preview != null ? preview : chosen == null ? void 0 : chosen.url) != null ? _c : "";
+  const filled = layout === "tile" ? Boolean(shownPreview) : Boolean(shownName);
   const showClear = clearable && filled && !disabled;
   const insideHintId = inside && hasContent(hint) && !filled ? `${controlId}-hint` : void 0;
   const describedBy = [inside ? insideHintId : ids.hintId, errorId, input["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-  const removeName = clearLabel != null ? clearLabel : variant === "tile" ? "Remover imagem" : "Remover arquivo";
+  const removeName = clearLabel != null ? clearLabel : layout === "tile" ? "Remover imagem" : "Remover arquivo";
   function change(event) {
     const files = event.target.files;
     if (!(files == null ? void 0 : files.length)) {
@@ -101,7 +104,7 @@ function FileInput(_a) {
     } else {
       const size = Array.from(files).reduce((sum, file) => sum + file.size, 0);
       const first = files[0];
-      const url = variant === "tile" && first.type.startsWith("image/") && typeof URL.createObjectURL === "function" ? URL.createObjectURL(first) : void 0;
+      const url = layout === "tile" && first.type.startsWith("image/") && typeof URL.createObjectURL === "function" ? URL.createObjectURL(first) : void 0;
       setChosen({ name: files.length === 1 ? first.name : `${files.length} arquivos`, size, url });
     }
     onChange == null ? void 0 : onChange(event);
@@ -149,14 +152,14 @@ function FileInput(_a) {
     },
     onDrop: drop
   };
-  const covered = !(variant === "tile" && filled);
+  const covered = !(layout === "tile" && filled);
   const control = /* @__PURE__ */ jsx(
     "input",
     __spreadProps(__spreadValues({}, input), {
       ref: setRef,
       id: controlId,
       type: "file",
-      accept: (_c = input.accept) != null ? _c : variant === "tile" ? "image/*" : void 0,
+      accept: (_d = input.accept) != null ? _d : layout === "tile" ? "image/*" : void 0,
       className: ["rds-field__control", "rds-file-input__control", !covered && "rds-file-input__control--off"].filter(Boolean).join(" "),
       tabIndex: covered ? input.tabIndex : -1,
       required,
@@ -168,7 +171,7 @@ function FileInput(_a) {
   );
   const clearButton = showClear && /* @__PURE__ */ jsx(FieldAction, { label: removeName, icon: /* @__PURE__ */ jsx(CloseIcon, {}), onClick: clear });
   let face;
-  if (variant === "dropzone") {
+  if (layout === "dropzone") {
     face = filled ? /* @__PURE__ */ jsxs("span", { className: "rds-file-input__file", children: [
       /* @__PURE__ */ jsx("span", { className: "rds-file-input__circle", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PaperclipIcon, {}) }),
       /* @__PURE__ */ jsxs("span", { className: "rds-file-input__file-texts", "aria-hidden": "true", children: [
@@ -183,7 +186,7 @@ function FileInput(_a) {
         hasContent(hint) && /* @__PURE__ */ jsx("span", { id: insideHintId, className: "rds-file-input__caption", children: hint })
       ] })
     ] });
-  } else if (variant === "tile") {
+  } else if (layout === "tile") {
     face = filled ? /* @__PURE__ */ jsx("img", { className: "rds-file-input__preview", src: shownPreview, alt: previewAlt != null ? previewAlt : typeof label === "string" ? `Pr\xE9via de ${label}` : "Pr\xE9via" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "rds-file-input__tile-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ImagePlusIcon, {}) }),
       /* @__PURE__ */ jsx("span", { className: "rds-file-input__tile-text", "aria-hidden": "true", children: tileText })
@@ -198,16 +201,16 @@ function FileInput(_a) {
     ] });
   }
   const boxClassName = [
-    variant === "field" && showClear && "rds-field__box--action",
-    variant === "dropzone" && "rds-file-input__area",
-    variant === "tile" && "rds-file-input__area rds-file-input__tile",
-    variant !== "field" && filled && "rds-file-input__area--filled",
-    variant !== "field" && dragging && "rds-file-input__area--dragging"
+    layout === "field" && showClear && "rds-field__box--action",
+    layout === "dropzone" && "rds-file-input__area",
+    layout === "tile" && "rds-file-input__area rds-file-input__tile",
+    layout !== "field" && filled && "rds-file-input__area--filled",
+    layout !== "field" && dragging && "rds-file-input__area--dragging"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     FieldShell,
     {
-      kind: `rds-file-input rds-file-input--${variant}`,
+      kind: `rds-file-input rds-file-input--${layout}`,
       controlId,
       hintId: inside ? void 0 : ids.hintId,
       errorId,
@@ -218,19 +221,19 @@ function FileInput(_a) {
       required,
       disabled,
       boxClassName: boxClassName || void 0,
-      boxProps: variant === "field" ? void 0 : boxProps,
+      boxProps: layout === "field" ? void 0 : boxProps,
       className,
       style,
       children: [
         face,
         control,
-        variant === "tile" ? filled && !disabled && /* @__PURE__ */ jsxs("span", { className: "rds-file-input__actions", children: [
+        layout === "tile" ? filled && !disabled && /* @__PURE__ */ jsxs("span", { className: "rds-file-input__actions", children: [
           /* @__PURE__ */ jsx(FieldAction, { label: replaceLabel, icon: /* @__PURE__ */ jsx(UploadIcon, {}), onClick: () => {
             var _a3;
             return (_a3 = own.current) == null ? void 0 : _a3.click();
           } }),
           clearButton
-        ] }) : variant === "field" && clearButton
+        ] }) : layout === "field" && clearButton
       ]
     }
   );

package/dist/components/filter-chip.d.ts

@@ -8,17 +8,23 @@ interface FilterChipProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
     count?: ReactNode;
     /** An icon before the label, in the label's colour (Figma: `showIcon` + `icon`). Decorative. */
     icon?: ReactNode;
-    /** Controlled: the filter is on (Figma: state=active). */
-    active?: boolean;
+    /** Controlled: the filter is on (Figma: `pressed`), as the Toggle. */
+    pressed?: boolean;
     /** Uncontrolled: on at first. */
-    defaultActive?: boolean;
+    defaultPressed?: boolean;
     /** Called with the new state when the chip is pressed (a button, not a link). */
+    onPressedChange?: (pressed: boolean) => void;
+    /** @deprecated Use `pressed` (2.0.0-next). */
+    active?: boolean;
+    /** @deprecated Use `defaultPressed` (2.0.0-next). */
+    defaultActive?: boolean;
+    /** @deprecated Use `onPressedChange` (2.0.0-next). */
     onActiveChange?: (active: boolean) => void;
     /** Rendered as aria-disabled="true": stays in the tab order and takes focus, but does not turn on or navigate. */
     disabled?: boolean;
     /**
      * Render the single child element (an `<a>`, a framework `Link`) with the chip's classes, for a filter that
-     * lives in the URL and should survive back/forward. The link gets aria-current when active.
+     * lives in the URL and should survive back/forward. The link gets aria-current when pressed.
      */
     asChild?: boolean;
 }
@@ -28,7 +34,7 @@ interface FilterChipProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
  * brand tint, brand border and label. Up to 5 in a FilterChipGroup; more than that, the Select. A value that can
  * be removed is the Chip. Styles: filter-chip.css.
  */
-declare function FilterChip({ children, count, icon, active, defaultActive, onActiveChange, disabled, asChild, type, className, onClick, ...rest }: FilterChipProps): react.JSX.Element;
+declare function FilterChip({ children, count, icon, pressed: pressedProp, defaultPressed, onPressedChange, active, defaultActive, onActiveChange, disabled, asChild, type, className, onClick, ...rest }: FilterChipProps): react.JSX.Element;
 interface FilterChipGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Required: what the filters cut, such as "Filtrar por tipo". Several groups on a page must be told apart. */
     'aria-label': string;