@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/fab.js

@@ -1,6 +1,10 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
   useCallback,
@@ -9,9 +13,28 @@ import {
   useRef,
   useState
 } from "react";
-import Link from "next/link";
-import { Plus, Loader2 } from "lucide-react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { blockWhenDisabled } from "./internal/button.js";
+import { PlusIcon } from "./internal/icons.js";
+import { SavingBar } from "./saving-bar.js";
 import { useSavingBarActive } from "./saving-bar-context.js";
+function FAB(_a) {
+  var _b = _a, { children, icon, disabled, asChild, type = "button", className, onClick } = _b, rest = __objRest(_b, ["children", "icon", "disabled", "asChild", "type", "className", "onClick"]);
+  const Root = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    __spreadProps(__spreadValues({}, rest), {
+      type: asChild ? void 0 : type,
+      className: ["rds-fab", className].filter(Boolean).join(" "),
+      "aria-disabled": disabled || void 0,
+      onClick: blockWhenDisabled(disabled, onClick),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "rds-fab__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx(Slottable, { children })
+      ]
+    })
+  );
+}
 const FABContext = createContext({
   config: null,
   setFAB: () => {
@@ -50,61 +73,38 @@ function usePageFAB(config, deps = []) {
   }, [setFAB, clearFAB, ...deps]);
 }
 function FABRoot() {
+  var _a, _b, _c;
   const { config, bottomOffset, fabHidden } = useFAB();
   const savingBarActive = useSavingBarActive();
   const hiddenByBar = savingBarActive && (config == null ? void 0 : config.variant) !== "save";
   const visible = !!config && !fabHidden && !hiddenByBar;
   const wrapCls = [
-    "fixed right-6 z-40 flex items-center gap-2 transition-all duration-200",
-    visible ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-2 pointer-events-none"
-  ].join(" ");
-  const bottomStyle = { bottom: `${24 + bottomOffset}px` };
-  if ((config == null ? void 0 : config.variant) === "save") {
-    return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-(--radius-control) px-4 py-3 [background:var(--fab-save-bg)] [box-shadow:var(--fab-save-shadow)]", children: [
-      config.secondary && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: config.secondary.onClick,
-          disabled: config.loading,
-          className: "rounded-(--radius-control) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 cursor-pointer [border-color:var(--fab-save-discard-border)] [color:var(--fab-save-discard-text)] hover:[border-color:var(--fab-save-discard-border-hover)] hover:[color:var(--fab-save-discard-text-hover)]",
-          children: config.secondary.label
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: config.onClick,
-          disabled: config.disabled || config.loading,
-          className: "rounded-(--radius-control) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 cursor-pointer flex items-center gap-2 [background:var(--fab-save-primary-bg)] [color:var(--fab-save-primary-text)] hover:[background:var(--fab-save-primary-bg-hover)]",
-          children: config.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }),
-            "Salvando..."
-          ] }) : config.label
-        }
-      )
-    ] }) });
+    "rds-fab-root",
+    (config == null ? void 0 : config.variant) === "save" ? "rds-fab-root--bar" : "rds-fab-root--fab",
+    !visible && "rds-fab-root--hidden"
+  ].filter(Boolean).join(" ");
+  const bottomStyle = { bottom: `${((config == null ? void 0 : config.variant) === "save" ? 0 : 24) + bottomOffset}px` };
+  if (!config) return null;
+  if (config.variant === "save") {
+    return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: /* @__PURE__ */ jsx(
+      SavingBar,
+      {
+        status: config.loading ? "saving" : "unsaved",
+        saveLabel: config.label,
+        onSave: () => {
+          var _a2;
+          return (_a2 = config.onClick) == null ? void 0 : _a2.call(config);
+        },
+        onDiscard: (_a = config.secondary) == null ? void 0 : _a.onClick,
+        discardLabel: (_b = config.secondary) == null ? void 0 : _b.label
+      }
+    ) });
   }
-  const btnCls = "flex items-center gap-2 h-12 pl-4 pr-5 rounded-(--radius-control) text-label font-semibold shadow-lg transition-colors cursor-pointer [background:var(--fab-cta-bg)] [color:var(--fab-cta-text)] hover:[background:var(--fab-cta-bg-hover)]";
-  return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: (config == null ? void 0 : config.href) ? /* @__PURE__ */ jsxs(Link, { href: config.href, className: btnCls, children: [
-    /* @__PURE__ */ jsx(Plus, { size: 16, strokeWidth: 2.5 }),
-    config == null ? void 0 : config.label
-  ] }) : /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: config == null ? void 0 : config.onClick,
-      disabled: config == null ? void 0 : config.disabled,
-      className: btnCls + " disabled:opacity-50",
-      children: [
-        /* @__PURE__ */ jsx(Plus, { size: 16, strokeWidth: 2.5 }),
-        config == null ? void 0 : config.label
-      ]
-    }
-  ) });
+  const icon = (_c = config.icon) != null ? _c : /* @__PURE__ */ jsx(PlusIcon, {});
+  return /* @__PURE__ */ jsx("div", { className: wrapCls, style: bottomStyle, children: config.href ? /* @__PURE__ */ jsx(FAB, { asChild: true, icon, disabled: config.disabled, children: /* @__PURE__ */ jsx("a", { href: config.href, children: config.label }) }) : /* @__PURE__ */ jsx(FAB, { icon, disabled: config.disabled, onClick: config.onClick, children: config.label }) });
 }
 export {
+  FAB,
   FABProvider,
   FABRoot,
   useFAB,

package/dist/components/faq.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface FAQProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: ReactNode;
+    /** The block's title, an h2 that names the section. */
+    title: ReactNode;
+    /** The Accordion with the questions (the Figma exposes it). Its items' titles are h3. */
+    children: ReactNode;
+    /** The support line (Figma: `showSupport` + `supportText`). */
+    supportText?: ReactNode;
+    /** The way to support: an action ghost Button, or a link through asChild. */
+    supportAction?: ReactNode;
+}
+/**
+ * FAQ — Figma [RDS] Blocks/FAQ. The frequent questions of a public page, in an Accordion, and the way to support.
+ * Adapts to the width of its container (Figma: `screen`). Styles: faq.css.
+ */
+declare function FAQ({ eyebrow, title, children, supportText, supportAction, className, ...rest }: FAQProps): react.JSX.Element;
+
+export { FAQ, type FAQProps };

package/dist/components/faq.js

@@ -0,0 +1,24 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { BlockHeading } from "./internal/block.js";
+function FAQ(_a) {
+  var _b = _a, { eyebrow, title, children, supportText, supportAction, className } = _b, rest = __objRest(_b, ["eyebrow", "title", "children", "supportText", "supportAction", "className"]);
+  const titleId = useId();
+  return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({ "aria-labelledby": titleId }, rest), { className: ["rds-block", "rds-faq", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-block__inner", children: [
+    /* @__PURE__ */ jsx(BlockHeading, { eyebrow, title, titleId }),
+    /* @__PURE__ */ jsx("div", { className: "rds-faq__questions", children }),
+    (supportText || supportAction) && /* @__PURE__ */ jsxs("div", { className: "rds-faq__support", children: [
+      supportText && /* @__PURE__ */ jsx("p", { className: "rds-faq__support-text", children: supportText }),
+      supportAction
+    ] })
+  ] }) }));
+}
+export {
+  FAQ
+};

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

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { FieldTextProps } from './internal/field.js';
+
+type FileInputVariant = 'field' | 'dropzone' | 'tile';
+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.
+     */
+    variant?: FileInputVariant;
+    /** 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". */
+    fileSize?: string;
+    /**
+     * tile: the image shown (a URL). Passing it controls the preview, '' for none; by default, the chosen image. Use it
+     * for an image that is already saved.
+     */
+    preview?: string;
+    /** tile: the preview's alternative text. By default "Prévia de <label>". */
+    previewAlt?: string;
+    /** dropzone: the call in the empty area (Figma: `dropTitle`). */
+    dropTitle?: ReactNode;
+    /** tile: the text of the empty tile (Figma: `tileText`), such as "Enviar logo". */
+    tileText?: ReactNode;
+    /** The × that takes the file out (Figma: `showClear`). On by default: the person must be able to change the file. */
+    clearable?: boolean;
+    /** Called after the × takes the file out. */
+    onClear?: () => void;
+    /** Called with the files chosen or dropped (after `onChange`, which also fires). */
+    onFiles?: (files: FileList) => void;
+    /** The ×'s accessible name. By default "Remover arquivo" ("Remover imagem" in the tile). */
+    clearLabel?: string;
+    /** tile: the name of the button that swaps the image. */
+    replaceLabel?: string;
+    /** field: the text of the box that opens the file chooser. */
+    chooseLabel?: string;
+    /** field: what the box says before a file is chosen. */
+    emptyLabel?: string;
+}
+/** "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
+ * 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,
+ * `required` and the form get the file. A file dropped on the box goes into that same input. Say the formats and the
+ * 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;
+
+export { FileInput, type FileInputProps, type FileInputVariant, formatFileSize };

package/dist/components/file-input.js

@@ -0,0 +1,244 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { FieldAction, FieldShell, hasContent, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { CloseIcon, ImagePlusIcon, PaperclipIcon, UploadIcon } from "./internal/icons.js";
+function formatFileSize(bytes) {
+  const units = ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const digits = unit === 0 || value >= 100 ? 0 : 1;
+  return `${value.toLocaleString("pt-BR", { maximumFractionDigits: digits })} ${units[unit]}`;
+}
+function FileInput(_a) {
+  var _b = _a, {
+    variant = "field",
+    label,
+    hint,
+    error,
+    errorMessage,
+    required,
+    fileName,
+    fileSize,
+    preview,
+    previewAlt,
+    dropTitle = "Arraste o arquivo ou clique para escolher",
+    tileText = "Enviar imagem",
+    clearable = true,
+    onClear,
+    onFiles,
+    clearLabel,
+    replaceLabel = "Trocar imagem",
+    chooseLabel = "Escolher arquivo",
+    emptyLabel = "Nenhum arquivo",
+    id,
+    disabled,
+    className,
+    style,
+    onChange,
+    ref
+  } = _b, input = __objRest(_b, [
+    "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"
+  ]);
+  var _a2, _b2, _c;
+  warnIfUnlabelled("FileInput", label, input["aria-label"], input["aria-labelledby"]);
+  const inside = variant === "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 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 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";
+  function change(event) {
+    const files = event.target.files;
+    if (!(files == null ? void 0 : files.length)) {
+      setChosen(null);
+    } 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;
+      setChosen({ name: files.length === 1 ? first.name : `${files.length} arquivos`, size, url });
+    }
+    onChange == null ? void 0 : onChange(event);
+    if (files == null ? void 0 : files.length) onFiles == null ? void 0 : onFiles(files);
+  }
+  function setRef(node) {
+    own.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }
+  function clear() {
+    var _a3;
+    if (own.current) own.current.value = "";
+    setChosen(null);
+    onClear == null ? void 0 : onClear();
+    (_a3 = own.current) == null ? void 0 : _a3.focus();
+  }
+  function drop(event) {
+    var _a3;
+    event.preventDefault();
+    setDragging(false);
+    const target = own.current;
+    const files = (_a3 = event.dataTransfer) == null ? void 0 : _a3.files;
+    if (disabled || !target || !(files == null ? void 0 : files.length)) return;
+    if (input.multiple || files.length === 1) {
+      target.files = files;
+    } else {
+      const one = new DataTransfer();
+      one.items.add(files[0]);
+      target.files = one.files;
+    }
+    target.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  const boxProps = {
+    onDragEnter: (event) => {
+      event.preventDefault();
+      if (!disabled) setDragging(true);
+    },
+    onDragOver: (event) => {
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+    },
+    onDragLeave: (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+    },
+    onDrop: drop
+  };
+  const covered = !(variant === "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,
+      className: ["rds-field__control", "rds-file-input__control", !covered && "rds-file-input__control--off"].filter(Boolean).join(" "),
+      tabIndex: covered ? input.tabIndex : -1,
+      required,
+      disabled,
+      "aria-invalid": invalid || void 0,
+      "aria-describedby": describedBy,
+      onChange: change
+    })
+  );
+  const clearButton = showClear && /* @__PURE__ */ jsx(FieldAction, { label: removeName, icon: /* @__PURE__ */ jsx(CloseIcon, {}), onClick: clear });
+  let face;
+  if (variant === "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: [
+        /* @__PURE__ */ jsx("span", { className: "rds-file-input__file-name", children: shownName }),
+        shownSize && /* @__PURE__ */ jsx("span", { className: "rds-file-input__caption", children: shownSize })
+      ] }),
+      clearButton
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-file-input__circle", "aria-hidden": "true", children: /* @__PURE__ */ jsx(UploadIcon, {}) }),
+      /* @__PURE__ */ jsxs("span", { className: "rds-file-input__texts", children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-file-input__title", "aria-hidden": "true", children: dropTitle }),
+        hasContent(hint) && /* @__PURE__ */ jsx("span", { id: insideHintId, className: "rds-file-input__caption", children: hint })
+      ] })
+    ] });
+  } else if (variant === "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 })
+    ] });
+  } else {
+    face = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-field__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PaperclipIcon, {}) }),
+      /* @__PURE__ */ jsxs("span", { className: "rds-file-input__face", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-file-input__choose", children: chooseLabel }),
+        /* @__PURE__ */ jsx("span", { className: ["rds-file-input__name", !shownName && "rds-file-input__name--empty"].filter(Boolean).join(" "), children: shownName || emptyLabel })
+      ] })
+    ] });
+  }
+  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"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
+    {
+      kind: `rds-file-input rds-file-input--${variant}`,
+      controlId,
+      hintId: inside ? void 0 : ids.hintId,
+      errorId,
+      label,
+      hint: inside ? void 0 : hint,
+      errorMessage,
+      invalid,
+      required,
+      disabled,
+      boxClassName: boxClassName || void 0,
+      boxProps: variant === "field" ? void 0 : boxProps,
+      className,
+      style,
+      children: [
+        face,
+        control,
+        variant === "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
+      ]
+    }
+  );
+}
+function revoke(chosen) {
+  if ((chosen == null ? void 0 : chosen.url) && typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(chosen.url);
+}
+export {
+  FileInput,
+  formatFileSize
+};

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

@@ -1,54 +1,41 @@
 import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode, HTMLAttributes } from 'react';
 
-interface FilterChipBaseProps {
-    label: string;
-    active: boolean;
-    count?: number;
+interface FilterChipProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    /** The filter's name (Figma: `label`): Todos, Entradas, Saídas. With `asChild`, the link goes here with it. */
+    children: ReactNode;
+    /** How many items the filter leaves, after the label (Figma: `hasCount` + `count`). */
+    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;
+    /** Uncontrolled: on at first. */
+    defaultActive?: boolean;
+    /** Called with the new state when the chip is pressed (a button, not a link). */
+    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;
-    className?: string;
-}
-interface FilterChipLinkProps extends FilterChipBaseProps {
-    href: string;
-    onClick?: never;
-}
-interface FilterChipButtonProps extends FilterChipBaseProps {
-    onClick: () => void;
-    href?: never;
-}
-type FilterChipProps = FilterChipLinkProps | FilterChipButtonProps;
-declare function FilterChip({ label, active, count, disabled, href, onClick, className }: FilterChipProps): react.JSX.Element;
-type FilterChipItem = {
-    label: string;
-    value: string | undefined;
-    count?: number;
-    href?: string;
-    onClick?: () => void;
-    disabled?: boolean;
-};
-interface FilterChipGroupProps {
-    items: FilterChipItem[];
-    active: string | undefined;
-    label: string;
-    className?: string;
+    /**
+     * 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.
+     */
+    asChild?: boolean;
 }
 /**
- * FilterChipGroup — barra de filtro com pills.
- *
- * Regra: ≤ 5 opções. Mais que isso → usar Select.
- * Renderiza como links (href) para preservar URL e back/forward,
- * ou como buttons (onClick) para filtro client-side.
- *
- * @example
- * <FilterChipGroup
- *   label="Filtrar por tipo"
- *   items={[
- *     { label: 'Todos',    value: undefined, href: '/stock' },
- *     { label: 'Entradas', value: 'in',      href: '/stock?filter=in' },
- *     { label: 'Saídas',   value: 'out',     href: '/stock?filter=out' },
- *   ]}
- *   active={searchParams.filter}
- * />
+ * FilterChip — Figma [RDS] Forms/FilterChip. A pill that turns a cut of the list on (Todos, Entradas, Saídas).
+ * A button with aria-pressed, or, with `asChild`, a link with aria-current. Off: card fill, hairline; on: the
+ * 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 FilterChipGroup({ items, active, label, className }: FilterChipGroupProps): react.JSX.Element;
+declare function FilterChip({ children, count, icon, 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;
+    /** The FilterChips, up to 5. */
+    children: ReactNode;
+}
+/** The row of FilterChips: a named group, 8 apart, wrapping on a narrow screen. */
+declare function FilterChipGroup({ className, children, ...rest }: FilterChipGroupProps): react.JSX.Element;
 
-export { FilterChip, FilterChipGroup, type FilterChipGroupProps, type FilterChipItem, type FilterChipProps };
+export { FilterChip, FilterChipGroup, type FilterChipGroupProps, type FilterChipProps };