@rojaostudio/ds 1.0.1 → 2.0.0-next.0

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 };

package/dist/components/filter-chip.js

@@ -1,64 +1,68 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import Link from "next/link";
-const BASE = "h-control-sm inline-flex items-center text-caption font-medium border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus px-[var(--filter-chip-padding-x)] [border-radius:var(--filter-chip-radius)]";
-const ACTIVE = "[background:var(--filter-chip-color-surface-active)] [border-color:var(--filter-chip-color-stroke-active)] [color:var(--filter-chip-color-text-active)]";
-const INACTIVE = "[background:var(--filter-chip-color-surface-inactive)] [border-color:var(--filter-chip-color-stroke-inactive)] [color:var(--filter-chip-color-text-inactive)] hover:[background:var(--filter-chip-color-surface-hover)] hover:[border-color:var(--filter-chip-color-stroke-hover)] hover:[color:var(--filter-chip-color-text-hover)]";
-const DISABLED = "[background:var(--filter-chip-color-surface-disabled)] [border-color:var(--filter-chip-color-stroke-disabled)] [color:var(--filter-chip-color-text-disabled)] opacity-50 pointer-events-none cursor-not-allowed";
-function FilterChipBody({ label, count }) {
-  if (count === void 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, label);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, label, /* @__PURE__ */ React.createElement("span", { className: "ml-1 opacity-60 tabular-nums" }, count));
-}
-function FilterChip({ label, active, count, disabled = false, href, onClick, className = "" }) {
-  const cls = [BASE, active ? ACTIVE : INACTIVE, disabled ? DISABLED : "", className].filter(Boolean).join(" ");
-  if (href) {
-    return /* @__PURE__ */ React.createElement(
-      Link,
-      {
-        href,
-        "aria-current": active ? "true" : void 0,
-        "aria-disabled": disabled || void 0,
-        tabIndex: disabled ? -1 : void 0,
-        className: cls
-      },
-      /* @__PURE__ */ React.createElement(FilterChipBody, { label, count })
-    );
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { blockWhenDisabled } from "./internal/button.js";
+function FilterChip(_a) {
+  var _b = _a, {
+    children,
+    count,
+    icon,
+    active,
+    defaultActive = false,
+    onActiveChange,
+    disabled,
+    asChild,
+    type = "button",
+    className,
+    onClick
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "count",
+    "icon",
+    "active",
+    "defaultActive",
+    "onActiveChange",
+    "disabled",
+    "asChild",
+    "type",
+    "className",
+    "onClick"
+  ]);
+  const [own, setOwn] = useState(defaultActive);
+  const on = active != null ? active : own;
+  const Root = asChild ? Slot : "button";
+  function click(event) {
+    onClick == null ? void 0 : onClick(event);
+    if (event.defaultPrevented || asChild) return;
+    if (active === void 0) setOwn(!on);
+    onActiveChange == null ? void 0 : onActiveChange(!on);
   }
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-pressed": active,
-      disabled,
-      className: cls
-    },
-    /* @__PURE__ */ React.createElement(FilterChipBody, { label, count })
+  return /* @__PURE__ */ jsxs(
+    Root,
+    __spreadProps(__spreadValues({}, rest), {
+      type: asChild ? void 0 : type,
+      className: ["rds-filter-chip", on && "rds-filter-chip--active", className].filter(Boolean).join(" "),
+      "aria-pressed": asChild ? void 0 : on,
+      "aria-current": asChild && on ? "true" : void 0,
+      "aria-disabled": disabled || void 0,
+      onClick: blockWhenDisabled(disabled, click),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "rds-filter-chip__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx(Slottable, { children: asChild ? children : /* @__PURE__ */ jsx("span", { className: "rds-filter-chip__label", children }) }),
+        count !== void 0 && count !== null && count !== "" && /* @__PURE__ */ jsx("span", { className: "rds-filter-chip__count", children: count })
+      ]
+    })
   );
 }
-function FilterChipGroup({ items, active, label, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { role: "group", "aria-label": label, className: ["flex flex-wrap [gap:var(--filter-chip-group-gap)]", className].filter(Boolean).join(" ") }, items.map((item) => {
-    var _a;
-    if (process.env.NODE_ENV === "development" && !item.href && !item.onClick) {
-      console.warn(`[FilterChipGroup] item "${item.label}" has neither href nor onClick \u2014 click will have no effect`);
-    }
-    const isActive = active === item.value || !active && item.value === void 0;
-    if (item.href) {
-      return /* @__PURE__ */ React.createElement(FilterChip, { key: item.label, label: item.label, active: isActive, count: item.count, disabled: item.disabled, href: item.href });
-    }
-    return /* @__PURE__ */ React.createElement(
-      FilterChip,
-      {
-        key: item.label,
-        label: item.label,
-        active: isActive,
-        count: item.count,
-        disabled: item.disabled,
-        onClick: (_a = item.onClick) != null ? _a : (() => {
-        })
-      }
-    );
-  }));
+function FilterChipGroup(_c) {
+  var _d = _c, { className, children } = _d, rest = __objRest(_d, ["className", "children"]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ role: "group" }, rest), { className: ["rds-filter-chip-group", className].filter(Boolean).join(" "), children }));
 }
 export {
   FilterChip,

package/dist/components/floating-stepper.d.ts

@@ -2,23 +2,10 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * FloatingStepper — pill flutuante de etapas de um fluxo (PDV, checkout).
- *
- * Mostra as etapas com dot de estado; etapas anteriores são navegáveis
- * (volta no fluxo), futuras ficam desabilitadas. `canNavigate` permite
- * customizar a regra. Slot `action` pra ação terminal (ex.: Reset).
- *
- * O POSICIONAMENTO é do caller (absolute/fixed via wrapper ou className) —
- * o componente só renderiza a pill.
- *
- * Uso:
- *   <FloatingStepper
- *     steps={[{ key: 'cart', label: 'Carrinho' }, ...]}
- *     current={step}
- *     onNavigate={setStep}
- *     action={{ label: 'Reset', icon: <RotateCcw />, onClick: reset }}
- *     className="absolute bottom-3 left-1/2 -translate-x-1/2 z-30"
- *   />
+ * FloatingStepper — a composition of the Card (as a pill) and Buttons (Figma [RDS] Actions/Button, neutral): the
+ * floating steps of a flow (point of sale, checkout). The current step is the filled Button (aria-current="step");
+ * earlier steps go back, later ones are disabled; `canNavigate` changes the rule. `action` is a last Button after
+ * a line (Reset). Where it floats is the caller's (className or a wrapper). Styles: floating-stepper.css.
  */
 type FloatingStepperStep = {
     key: string;
@@ -38,7 +25,9 @@ interface FloatingStepperProps {
         onClick: () => void;
     };
     className?: string;
+    /** The navigation's name. Default "Etapas". */
+    'aria-label'?: string;
 }
-declare function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, }: FloatingStepperProps): react.JSX.Element;
+declare function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, 'aria-label': ariaLabel }: FloatingStepperProps): react.JSX.Element;
 
 export { FloatingStepper, type FloatingStepperProps, type FloatingStepperStep };