@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/command.js

@@ -0,0 +1,177 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { SearchIcon } from "./internal/icons.js";
+import { MenuItemContent, menuItemClassName } from "./internal/menu.js";
+const CommandContext = createContext(null);
+function useCommand(part) {
+  const ctx = useContext(CommandContext);
+  if (!ctx) throw new Error(`${part} must be inside a Command`);
+  return ctx;
+}
+const normalize = (text) => text.normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase();
+const OPTION = '[role="option"]:not([aria-disabled="true"])';
+function Command({
+  trigger,
+  open,
+  defaultOpen,
+  onOpenChange,
+  query: queryProp,
+  defaultQuery = "",
+  onQueryChange,
+  placeholder = "Buscar ou ir para\u2026",
+  children,
+  emptyMessage = "Nenhum resultado",
+  hotkey = true,
+  label = "Comandos",
+  container
+}) {
+  const [ownOpen, setOwnOpen] = useState(defaultOpen != null ? defaultOpen : false);
+  const isOpen = open != null ? open : ownOpen;
+  const [ownQuery, setOwnQuery] = useState(defaultQuery);
+  const query = queryProp != null ? queryProp : ownQuery;
+  const [activeId, setActiveId] = useState(null);
+  const [count, setCount] = useState(0);
+  const listRef = useRef(null);
+  const listId = useId();
+  const setQuery = (next) => {
+    setOwnQuery(next);
+    onQueryChange == null ? void 0 : onQueryChange(next);
+  };
+  const setOpen = (next) => {
+    setOwnOpen(next);
+    onOpenChange == null ? void 0 : onOpenChange(next);
+    if (!next) setQuery("");
+  };
+  const toggle = useRef(() => {
+  });
+  toggle.current = () => setOpen(!isOpen);
+  useEffect(() => {
+    if (!hotkey) return;
+    const onKey = (event) => {
+      if (event.key.toLowerCase() === "k" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        toggle.current();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hotkey]);
+  const run = (onSelect) => {
+    setOpen(false);
+    onSelect == null ? void 0 : onSelect();
+  };
+  const onKeyDown = (event) => {
+    var _a, _b, _c, _d, _e;
+    const options = [...(_b = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll(OPTION)) != null ? _b : []];
+    if (!options.length) return;
+    const current = options.findIndex((o) => o.id === activeId);
+    let next = -1;
+    if (event.key === "ArrowDown") next = (current + 1) % options.length;
+    else if (event.key === "ArrowUp") next = (current - 1 + options.length) % options.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = options.length - 1;
+    else if (event.key === "Enter") {
+      event.preventDefault();
+      (_c = options[Math.max(current, 0)]) == null ? void 0 : _c.click();
+      return;
+    }
+    if (next < 0) return;
+    event.preventDefault();
+    setActiveId(options[next].id);
+    (_e = (_d = options[next]).scrollIntoView) == null ? void 0 : _e.call(_d, { block: "nearest" });
+  };
+  const mac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Root, { open: isOpen, onOpenChange: setOpen, children: [
+    trigger && /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container, children: [
+      /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "rds-command__scrim" }),
+      /* @__PURE__ */ jsxs(DialogPrimitive.Content, { className: "rds-command", "aria-describedby": void 0, children: [
+        /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "rds-visually-hidden", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-command__search", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-command__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "rds-command__input",
+              type: "text",
+              role: "combobox",
+              "aria-label": placeholder,
+              "aria-expanded": "true",
+              "aria-autocomplete": "list",
+              "aria-controls": listId,
+              "aria-activedescendant": count && activeId ? activeId : void 0,
+              autoComplete: "off",
+              spellCheck: false,
+              placeholder,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              onKeyDown
+            }
+          ),
+          hotkey && /* @__PURE__ */ jsx("kbd", { className: "rds-command__hint", "aria-hidden": "true", children: mac ? "\u2318 K" : "Ctrl K" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": "Resultados", className: "rds-command__results", children: /* @__PURE__ */ jsx(CommandContext.Provider, { value: { query: normalize(query.trim()), activeId, setActiveId, run }, children }) }),
+        /* @__PURE__ */ jsx(
+          Sync,
+          {
+            sync: () => {
+              var _a, _b, _c, _d;
+              const options = [...(_b = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll(OPTION)) != null ? _b : []];
+              if (options.length !== count) setCount(options.length);
+              if (!options.some((o) => o.id === activeId)) setActiveId((_d = (_c = options[0]) == null ? void 0 : _c.id) != null ? _d : null);
+            }
+          }
+        ),
+        count === 0 && /* @__PURE__ */ jsx("p", { className: "rds-command__empty", children: emptyMessage }),
+        /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", "aria-live": "polite", children: query ? count ? `${count} ${count === 1 ? "resultado" : "resultados"}` : emptyMessage : "" })
+      ] })
+    ] })
+  ] });
+}
+function Sync({ sync }) {
+  useLayoutEffect(sync);
+  return null;
+}
+function CommandGroup({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": label, className: "rds-command__group", children: [
+    /* @__PURE__ */ jsx("p", { className: "rds-command__group-label", "aria-hidden": "true", children: label }),
+    children
+  ] });
+}
+function CommandItem({ children, icon, shortcut, onSelect, value, keywords = [], disabled }) {
+  const { query, activeId, setActiveId, run } = useCommand("CommandItem");
+  const id = useId();
+  const text = value != null ? value : typeof children === "string" || typeof children === "number" ? String(children) : "";
+  if (query && !normalize([text, ...keywords].join(" ")).includes(query)) return null;
+  const active = id === activeId;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      role: "option",
+      "aria-selected": active,
+      "aria-disabled": disabled || void 0,
+      "data-active": active ? "" : void 0,
+      className: menuItemClassName(),
+      onPointerMove: disabled ? void 0 : () => setActiveId(id),
+      onClick: disabled ? void 0 : () => run(onSelect),
+      children: /* @__PURE__ */ jsx(MenuItemContent, { icon, shortcut, children })
+    }
+  );
+}
+export {
+  Command,
+  CommandGroup,
+  CommandItem
+};

package/dist/components/contact.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, FormEvent } from 'react';
+
+interface ContactProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'onSubmit'> {
+    eyebrow?: ReactNode;
+    /** The block's title, an h2 that names the section and the form. */
+    title: ReactNode;
+    description?: ReactNode;
+    /**
+     * The fields and the button (the Figma exposes them): Input name and e-mail, Textarea, the consent Checkbox and a
+     * submit Button, which takes the full width.
+     */
+    children: ReactNode;
+    /** Runs on send, with the form's data. The browser's own validation is off: show the fields' errors. */
+    onSubmit: (data: FormData, event: FormEvent<HTMLFormElement>) => void;
+}
+/**
+ * Contact — Figma [RDS] Blocks/Contact. The contact form of a public page. Adapts to the width of its container
+ * (Figma: `screen`). Styles: contact.css.
+ */
+declare function Contact({ eyebrow, title, description, children, onSubmit, className, ...rest }: ContactProps): react.JSX.Element;
+
+export { Contact, type ContactProps };

package/dist/components/contact.js

@@ -0,0 +1,32 @@
+"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 Contact(_a) {
+  var _b = _a, { eyebrow, title, description, children, onSubmit, className } = _b, rest = __objRest(_b, ["eyebrow", "title", "description", "children", "onSubmit", "className"]);
+  const titleId = useId();
+  return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({ "aria-labelledby": titleId }, rest), { className: ["rds-block", "rds-contact", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-block__inner", children: [
+    /* @__PURE__ */ jsx(BlockHeading, { eyebrow, title, description, titleId }),
+    /* @__PURE__ */ jsx(
+      "form",
+      {
+        className: "rds-contact__form",
+        "aria-labelledby": titleId,
+        noValidate: true,
+        onSubmit: (event) => {
+          event.preventDefault();
+          onSubmit(new FormData(event.currentTarget), event);
+        },
+        children
+      }
+    )
+  ] }) }));
+}
+export {
+  Contact
+};

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

@@ -1,33 +1,41 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { MenuItemContentProps, MenuItemTone } from './internal/menu.js';
 
-/**
- * ContextMenu — menu acionado por clique direito (contextmenu event).
- *
- * Uso:
- *   <ContextMenu menu={({ close }) => (
- *     <>
- *       <MenuItem onClick={() => { copy(); close(); }}>Copiar</MenuItem>
- *       <MenuItem onClick={() => { paste(); close(); }}>Colar</MenuItem>
- *     </>
- *   )}>
- *     <div className="border p-4">Clique direito aqui</div>
- *   </ContextMenu>
- *
- * Posiciona no ponto exato do clique. Fecha em ESC, clique fora, scroll.
- */
+type ContextMenuItemTone = MenuItemTone;
 interface ContextMenuProps {
-    children: ReactNode;
-    /** Conteúdo do menu (mesmo formato do Menu — MenuItem, MenuSeparator, etc). */
-    menu: ReactNode | ((api: {
-        close: () => void;
-    }) => ReactNode);
-    /** Largura mínima em px. default = 180. */
-    minWidth?: number;
-    /** Desabilita o context menu. default = false. */
+    /**
+     * The area it opens on (one element). Make it focusable (tabIndex={0}, or a control) so the keyboard can open
+     * the menu too, with the menu key or Shift+F10.
+     */
+    children: ReactElement;
+    /** The ContextMenuItems, with a ContextMenuSeparator between groups. */
+    items: ReactNode;
+    /** Turns it off: the right click shows the browser's menu again. */
     disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The menu's name for screen readers. */
+    'aria-label'?: string;
     className?: string;
 }
-declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenu — Figma [RDS] Overlays/ContextMenu (spec only: the DropdownMenu's look, opened by the right click,
+ * a long touch, the menu key or Shift+F10). Radix ContextMenu: role="menu" at the pointer; the arrows move,
+ * Enter chooses, Escape closes. It is never the only way to an action: every item also lives on the screen or in a
+ * DropdownMenu. Styles: internal/menu.css.
+ */
+declare function ContextMenu({ children, items, disabled, onOpenChange, className, 'aria-label': ariaLabel }: ContextMenuProps): react.JSX.Element;
+interface ContextMenuItemProps extends MenuItemContentProps {
+    /** Runs when the item is chosen; the menu then closes. */
+    onSelect?: () => void;
+    /** danger for what destroys: last, after a separator. */
+    tone?: ContextMenuItemTone;
+    disabled?: boolean;
+    textValue?: string;
+}
+/** One action (Figma .menu/item): role="menuitem". */
+declare function ContextMenuItem({ children, icon, shortcut, onSelect, tone, disabled, textValue }: ContextMenuItemProps): react.JSX.Element;
+/** The line between groups of actions. */
+declare function ContextMenuSeparator(): react.JSX.Element;
 
-export { ContextMenu, type ContextMenuProps };
+export { ContextMenu, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemTone, type ContextMenuProps, ContextMenuSeparator };

package/dist/components/context-menu.js

@@ -1,74 +1,47 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useRef, useImperativeHandle } from "react";
-import { createPortal } from "react-dom";
-const ContextMenu = forwardRef(function ContextMenu2({
-  children,
-  menu,
-  minWidth = 180,
-  disabled = false,
-  className = ""
-}, ref) {
-  const [pos, setPos] = useState(null);
-  const [mounted, setMounted] = useState(false);
-  const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  useImperativeHandle(ref, () => containerRef.current);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (!pos) return;
-    const close = () => setPos(null);
-    const handleClick = (e) => {
-      var _a;
-      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
-      close();
-    };
-    const handleKey = (e) => {
-      if (e.key === "Escape") close();
-    };
-    document.addEventListener("mousedown", handleClick);
-    document.addEventListener("keydown", handleKey);
-    document.addEventListener("scroll", close, true);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("keydown", handleKey);
-      document.removeEventListener("scroll", close, true);
-    };
-  }, [pos]);
-  useEffect(() => {
-    if (!pos || !menuRef.current) return;
-    const rect = menuRef.current.getBoundingClientRect();
-    const { innerWidth: vw, innerHeight: vh } = window;
-    let { x, y } = pos;
-    if (x + rect.width > vw - 8) x = vw - rect.width - 8;
-    if (y + rect.height > vh - 8) y = vh - rect.height - 8;
-    if (x !== pos.x || y !== pos.y) setPos({ x, y });
-  }, [pos]);
-  function handleContext(e) {
-    if (disabled) return;
-    e.preventDefault();
-    setPos({ x: e.clientX, y: e.clientY });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { ref: containerRef, onContextMenu: handleContext, className, children }),
-    mounted && pos && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Menu from "@radix-ui/react-context-menu";
+import { MenuItemContent, menuItemClassName } from "./internal/menu.js";
+function openFromKeyboard(event) {
+  const isMenuKey = event.key === "ContextMenu" || event.shiftKey && event.key === "F10";
+  if (!isMenuKey) return;
+  event.preventDefault();
+  const rect = event.currentTarget.getBoundingClientRect();
+  event.currentTarget.dispatchEvent(
+    new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      clientX: rect.left + Math.min(rect.width, 16),
+      clientY: rect.top + Math.min(rect.height, 16)
+    })
+  );
+}
+function ContextMenu({ children, items, disabled, onOpenChange, className, "aria-label": ariaLabel }) {
+  return (
+    // Not modal, as the DropdownMenu: the page is not hidden from screen readers while the menu is open.
+    /* @__PURE__ */ jsxs(Menu.Root, { onOpenChange, modal: false, children: [
+      /* @__PURE__ */ jsx(Menu.Trigger, { asChild: true, disabled, onKeyDown: disabled ? void 0 : openFromKeyboard, children }),
+      /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+        Menu.Content,
         {
-          ref: menuRef,
-          role: "menu",
-          className: "fixed z-[1000] rounded-(--radius-card) border border-stroke-default bg-surface-default shadow-lg py-1",
-          style: { top: pos.y, left: pos.x, minWidth },
-          children: typeof menu === "function" ? menu({ close: () => setPos(null) }) : menu
+          collisionPadding: 8,
+          "aria-label": ariaLabel,
+          className: ["rds-menu", "rds-context-menu", className].filter(Boolean).join(" "),
+          children: items
         }
-      ),
-      document.body
-    )
-  ] });
-});
+      ) })
+    ] })
+  );
+}
+function ContextMenuItem({ children, icon, shortcut, onSelect, tone, disabled, textValue }) {
+  return /* @__PURE__ */ jsx(Menu.Item, { onSelect, disabled, textValue, className: menuItemClassName(tone), children: /* @__PURE__ */ jsx(MenuItemContent, { icon, shortcut, children }) });
+}
+function ContextMenuSeparator() {
+  return /* @__PURE__ */ jsx(Menu.Separator, { className: "rds-menu__separator" });
+}
 export {
-  ContextMenu
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuSeparator
 };

package/dist/components/copy-field.d.ts

@@ -1,16 +1,21 @@
 import * as react from 'react';
 
 interface CopyFieldProps {
-    /** Texto copiado pro clipboard. */
+    /** What goes to the clipboard. */
     value: string;
-    /** Rótulo do botão em repouso. */
+    /** The button's text at rest. */
     label?: string;
-    /** Rótulo após copiar (feedback). */
+    /** The text for 2 s after copying; it is announced too. */
     copiedLabel?: string;
-    /** Largura total do container. */
+    /** Takes the container's whole width. */
     fullWidth?: boolean;
     className?: string;
 }
-declare function CopyField({ value, label, copiedLabel, fullWidth, className, }: CopyFieldProps): react.JSX.Element;
+/**
+ * CopyField — a composition of the Button (Figma [RDS] Actions/Button, outline, neutral): copies `value` to the
+ * clipboard and says so for 2 s ("Copiado!"), on screen and to screen readers. Used next to a QR code or a link
+ * to share. Styles: copy-field.css.
+ */
+declare function CopyField({ value, label, copiedLabel, fullWidth, className }: CopyFieldProps): react.JSX.Element;
 
 export { CopyField, type CopyFieldProps };

package/dist/components/copy-field.js

@@ -1,41 +1,36 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Copy, Check } from "lucide-react";
-function CopyField({
-  value,
-  label = "Copiar",
-  copiedLabel = "Copiado!",
-  fullWidth = false,
-  className = ""
-}) {
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./button.js";
+import { announce } from "./internal/announce.js";
+import { CheckIcon, CopyIcon } from "./internal/icons.js";
+function CopyField({ value, label = "Copiar", copiedLabel = "Copiado!", fullWidth = false, className }) {
   const [copied, setCopied] = useState(false);
-  async function handleCopy() {
+  const timer = useRef(null);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  async function copy() {
     try {
       await navigator.clipboard.writeText(value);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
     } catch (e) {
+      return;
     }
+    setCopied(true);
+    announce(copiedLabel);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 2e3);
   }
-  return /* @__PURE__ */ jsxs(
-    "button",
+  return /* @__PURE__ */ jsx(
+    Button,
     {
-      type: "button",
-      onClick: handleCopy,
-      "aria-label": label,
-      className: [
-        "inline-flex items-center justify-center gap-2 h-control-md px-4 rounded-(--radius-card)",
-        "border border-stroke-default text-fg-secondary text-sm font-semibold",
-        "hover:bg-surface-hover transition-colors focus-visible:ring-2 focus-visible:ring-stroke-focus",
-        fullWidth ? "w-full" : "",
-        className
-      ].join(" "),
-      children: [
-        copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-success-text" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4 shrink-0" }),
-        copied ? copiedLabel : label
-      ]
+      variant: "outline",
+      tone: "neutral",
+      icon: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+      onClick: copy,
+      className: ["rds-copy-field", fullWidth && "rds-copy-field--full", className].filter(Boolean).join(" "),
+      children: copied ? copiedLabel : label
     }
   );
 }

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

@@ -2,31 +2,45 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface CurrencyInputProps {
-    /** Label renderada acima do controle (mesmo padrão do Input do DS). */
+    /** The field's label (the Input's). Without it, pass aria-label. */
     label?: ReactNode;
-    /** Nome do hidden input pra submission (server actions, forms). */
+    'aria-label'?: string;
+    /** The name of the hidden input that submits the value, in subunits (an integer: 9900 is R$ 99,00). */
     name: string;
-    /** ISO 4217 — 'BRL', 'USD', 'JPY', etc. Quando passada, resolve symbol/decimals/locale automaticamente. */
+    /** ISO 4217 ('BRL', 'USD', 'JPY'): resolves the symbol, the decimals and the locale. */
     currency?: string;
-    /** Símbolo da moeda exibido à esquerda (R$, $, €, ₿). Obrigatório se `currency` não for passada. */
+    /** The symbol before the value (R$, $, €, ₿), the Input's prefix. Needed without `currency`. */
     symbol?: string;
-    /** Casas decimais. BRL/USD = 2, JPY = 0, BTC = 8. Obrigatório se `currency` não for passada. */
+    /** Decimal places: BRL and USD 2, JPY 0, BTC 8. Needed without `currency`. */
     decimals?: number;
-    /** Locale pra formatação. Default depende de `currency` (BRL→pt-BR etc) ou 'en'. */
+    /** The locale the value is formatted in. Default: the currency's (BRL → pt-BR), or 'en-US'. */
     locale?: string;
-    /** Valor inicial em SUBUNITS (integer). Ex: 9900 = R$99,00. */
+    /** The starting value in subunits. */
     defaultValueSubunits?: number | null;
     placeholder?: string;
     disabled?: boolean;
-    /** Callback com valor atual em subunits a cada mudança. */
+    required?: boolean;
+    /** A line under the field (the Input's hint). */
+    hint?: ReactNode;
+    /** What is wrong with the value (the Input's error). */
+    errorMessage?: ReactNode;
+    /** Called with the value in subunits on every change. */
     onChange?: (subunits: number) => void;
-    /** Máximo de dígitos. default = 10 → R$ 99.999.999,99. */
+    /** The most digits it takes. Default 10 (R$ 99.999.999,99). */
     maxDigits?: number;
-    /** Mostrar "0,00" em vez do placeholder quando valor é zero. default = false. */
+    /** Shows 0,00 instead of the placeholder when the value is zero. */
     showZero?: boolean;
+    /** @deprecated The [RDS] Input has one height (44). Ignored. */
     size?: 'sm' | 'md' | 'lg';
+    id?: string;
     className?: string;
 }
-declare function CurrencyInput({ label, name, currency, symbol: symbolProp, decimals: decimalsProp, locale: localeProp, defaultValueSubunits, placeholder, disabled, onChange, maxDigits, showZero, size, className, }: CurrencyInputProps): react.JSX.Element;
+/**
+ * CurrencyInput — a composition of the Input (Figma [RDS] Forms/Input) with the currency symbol as its prefix and a
+ * right-to-left mask: each digit typed becomes a cent, Backspace takes the last one off, pasting "R$ 50,00" gives
+ * 5000. The mask follows the input's value (onChange), not the keys, so the phone's keyboard opens and works. The
+ * value goes with the form in subunits, through a hidden input named `name`.
+ */
+declare function CurrencyInput({ label, 'aria-label': ariaLabel, name, currency, symbol: symbolProp, decimals: decimalsProp, locale: localeProp, defaultValueSubunits, placeholder, disabled, required, hint, errorMessage, onChange, maxDigits, showZero, id, className, }: CurrencyInputProps): react.JSX.Element;
 
 export { CurrencyInput, type CurrencyInputProps };