@rojaostudio/ds 2.0.0-next.16 → 2.0.0-next.18

package/dist/components/avatar.d.ts

@@ -3,15 +3,23 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 /** person is a circle; brand is a rounded square (a brand, a company, a campaign). */
 type AvatarType = 'person' | 'brand';
-type AvatarSize = 'sm' | 'default' | 'lg' | 'xl';
-/** What the Avatar shows. It follows from the props: a photo (`src`), initials (a name) or an icon (no name). */
-type AvatarVariant = 'image' | 'fallback' | 'icon';
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * What the Avatar shows (Figma: `content`). It follows from the props: a photo (`src`), initials (a name) or an icon
+ * (no name).
+ */
+type AvatarContent = 'image' | 'fallback' | 'icon';
+/** @deprecated Use AvatarContent (2.0.0-next: the Figma `variant` is `content`). */
+type AvatarVariant = AvatarContent;
 interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** person is a circle; brand is a square with rounded corners, initials in bold on the brand's mark colour. */
     type?: AvatarType;
-    /** sm 24, default 32, lg 40, xl 56. Inside an AvatarGroup, the group's size. */
-    size?: AvatarSize;
-    /** The photo (Figma: `variant=image`). If it fails to load, the initials (or the icon) show instead. */
+    /**
+     * sm 24, md 32 (default), lg 40, xl 56 (Figma: `size`). Inside an AvatarGroup, the group's size. `'default'` is
+     * deprecated (2.0.0-next): it is `'md'`.
+     */
+    size?: AvatarSize | 'default';
+    /** The photo (Figma: `content=image`). If it fails to load, the initials (or the icon) show instead. */
     src?: string;
     /**
      * The full name: the photo's alt, the initials' aria-label and the source of the initials. Leave it out only for an
@@ -20,7 +28,7 @@ interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>
     name?: string;
     /** The initials (Figma: `fallbackText`). By default two letters from `name`, one on a brand. */
     fallbackText?: string;
-    /** The icon when there is no name (Figma: `variant=icon` + `icon`). By default a person, or a building on a brand. */
+    /** The icon when there is no name (Figma: `content=icon` + `icon`). By default a person, or a building on a brand. */
     icon?: ReactNode;
     /** The presence dot (Figma: `showBadge`). The colour is not the only sign: `badgeLabel` goes into the accessible name. */
     showBadge?: boolean;
@@ -31,7 +39,7 @@ interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'>
 declare function initials(name: string): string;
 /**
  * Avatar — Figma [RDS] Content/Avatar. A person, or a brand, in miniature: photo, initials or icon. Not
- * interactive. The Figma `variant` follows from the props: `src` → image, a name → fallback, neither → icon.
+ * interactive. The Figma `content` follows from the props: `src` → image, a name → fallback, neither → icon.
  * Styles: avatar.css.
  */
 declare function Avatar({ type, size, src, name, fallbackText, icon, showBadge, badgeLabel, className, ...rest }: AvatarProps): react.JSX.Element;
@@ -39,14 +47,14 @@ type AvatarGroupSize = Exclude<AvatarSize, 'xl'>;
 interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Who the group is ("Equipe do projeto"). Required: it names the group for screen readers. */
     'aria-label': string;
-    /** The size of every Avatar inside (Figma: sm, default, lg). */
-    size?: AvatarGroupSize;
+    /** The size of every Avatar inside (Figma: sm, md, lg). `'default'` is deprecated (2.0.0-next): it is `'md'`. */
+    size?: AvatarGroupSize | 'default';
     /** Show only the first `max` and a "+N" with the rest. 3 or 4 is a good limit. */
     max?: number;
     /** The Avatars. */
     children: ReactNode;
 }
 /** AvatarGroup — Figma [RDS] Content/AvatarGroup. Overlapping avatars, each with a ring that separates it. */
-declare function AvatarGroup({ size, max, className, children, ...rest }: AvatarGroupProps): react.JSX.Element;
+declare function AvatarGroup({ size: sizeProp, max, className, children, ...rest }: AvatarGroupProps): react.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarType, type AvatarVariant, initials };
+export { Avatar, type AvatarContent, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarType, type AvatarVariant, initials };

package/dist/components/avatar.js

@@ -8,6 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Children, createContext, useContext, useState } from "react";
 import { BuildingIcon, UserIcon } from "./internal/icons.js";
 const GroupSize = createContext(void 0);
+const sizeOf = (size) => size === "default" ? "md" : size;
 function initials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "?";
@@ -38,26 +39,27 @@ function Avatar(_a) {
   ]);
   var _a2, _b2;
   const groupSize = useContext(GroupSize);
-  const finalSize = (_a2 = size != null ? size : groupSize) != null ? _a2 : "default";
+  const finalSize = sizeOf((_a2 = size != null ? size : groupSize) != null ? _a2 : "md");
   const [failed, setFailed] = useState(null);
   const trimmed = (_b2 = name == null ? void 0 : name.trim()) != null ? _b2 : "";
   const letters = fallbackText != null ? fallbackText : trimmed ? type === "brand" ? trimmed[0].toUpperCase() : initials(trimmed) : "";
-  const variant = src && failed !== src ? "image" : letters ? "fallback" : "icon";
+  const content = src && failed !== src ? "image" : letters ? "fallback" : "icon";
   const label = trimmed ? showBadge ? `${trimmed}, ${badgeLabel}` : trimmed : void 0;
-  const semantics = variant === "image" ? {} : label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+  const semantics = content === "image" ? {} : label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
   return /* @__PURE__ */ jsxs(
     "span",
     __spreadProps(__spreadValues(__spreadValues({}, semantics), rest), {
-      className: ["rds-avatar", `rds-avatar--${type}`, `rds-avatar--${finalSize}`, `rds-avatar--${variant}`, className].filter(Boolean).join(" "),
+      className: ["rds-avatar", `rds-avatar--${type}`, `rds-avatar--${finalSize}`, `rds-avatar--${content}`, className].filter(Boolean).join(" "),
       children: [
-        variant === "image" ? /* @__PURE__ */ jsx("img", { className: "rds-avatar__image", src, alt: label != null ? label : "", onError: () => setFailed(src != null ? src : null) }) : /* @__PURE__ */ jsx("span", { className: "rds-avatar__fallback", "aria-hidden": "true", children: variant === "fallback" ? letters : icon != null ? icon : type === "brand" ? /* @__PURE__ */ jsx(BuildingIcon, {}) : /* @__PURE__ */ jsx(UserIcon, {}) }),
+        content === "image" ? /* @__PURE__ */ jsx("img", { className: "rds-avatar__image", src, alt: label != null ? label : "", onError: () => setFailed(src != null ? src : null) }) : /* @__PURE__ */ jsx("span", { className: "rds-avatar__fallback", "aria-hidden": "true", children: content === "fallback" ? letters : icon != null ? icon : type === "brand" ? /* @__PURE__ */ jsx(BuildingIcon, {}) : /* @__PURE__ */ jsx(UserIcon, {}) }),
         showBadge && /* @__PURE__ */ jsx("span", { className: "rds-avatar__badge", "aria-hidden": "true" })
       ]
     })
   );
 }
 function AvatarGroup(_c) {
-  var _d = _c, { size = "default", max, className, children } = _d, rest = __objRest(_d, ["size", "max", "className", "children"]);
+  var _d = _c, { size: sizeProp = "md", max, className, children } = _d, rest = __objRest(_d, ["size", "max", "className", "children"]);
+  const size = sizeOf(sizeProp);
   const items = Children.toArray(children);
   const shown = max && items.length > max ? items.slice(0, max) : items;
   const hidden = items.length - shown.length;

package/dist/components/badge.d.ts

@@ -2,8 +2,8 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 type BadgeTone = 'neutral' | 'action' | 'accent' | 'inverse';
-/** Figma calls this property `style`. */
-type BadgeVariant = 'fill' | 'soft' | 'highlight';
+/** The emphasis (Figma: `variant`): fill (solid) or soft (a light plate; on accent, the brand's highlighter). */
+type BadgeVariant = 'fill' | 'soft';
 interface BadgeBase extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** The label (Figma: `label`): "Nova", "Grátis". Ignored when `value` is given. */
     children?: ReactNode;
@@ -11,15 +11,16 @@ interface BadgeBase extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     value?: number;
 }
 /**
- * Not every tone has every variant (as in Figma): soft only on neutral and action, highlight only on accent,
- * inverse only fill. The types allow only those.
+ * Not every tone has every variant (as in Figma): inverse is only fill. On accent, soft is the brand's highlighter
+ * (the old `highlight`). The types allow only those.
  */
 type BadgeProps = BadgeBase & ({
     tone?: 'neutral' | 'action';
-    variant?: 'fill' | 'soft';
+    variant?: BadgeVariant;
 } | {
     tone: 'accent';
-    variant?: 'fill' | 'highlight';
+    /** `'highlight'` is deprecated (2.0.0-next): it is `variant="soft"` on `tone="accent"`. */
+    variant?: BadgeVariant | 'highlight';
 } | {
     tone: 'inverse';
     variant?: 'fill';

package/dist/components/badge.js

@@ -10,10 +10,11 @@ function formatBadgeValue(value) {
 function Badge(_a) {
   var _b = _a, { tone = "neutral", variant = "fill", value, children, className } = _b, rest = __objRest(_b, ["tone", "variant", "value", "children", "className"]);
   const isNumber = value !== void 0;
+  const emphasis = variant === "highlight" ? "soft" : variant;
   return /* @__PURE__ */ jsx(
     "span",
     __spreadProps(__spreadValues({}, rest), {
-      className: ["rds-badge", `rds-badge--${tone}-${variant}`, isNumber && "rds-badge--number", className].filter(Boolean).join(" "),
+      className: ["rds-badge", `rds-badge--${tone}-${emphasis}`, isNumber && "rds-badge--number", className].filter(Boolean).join(" "),
       children: isNumber ? formatBadgeValue(value) : children
     })
   );

package/dist/components/breadcrumb.d.ts

@@ -6,7 +6,7 @@ interface BreadcrumbItem {
     /** Where the step leads. The last step is the current page and never gets a link. */
     href?: string;
 }
-type BreadcrumbTone = 'default' | 'inverse';
+type BreadcrumbTone = 'neutral' | 'inverse';
 type BreadcrumbLinkComponent = ComponentType<{
     href: string;
     className?: string;
@@ -16,10 +16,10 @@ interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'>
     /** The path, from the most general to the current page, the last one (Figma: the `items` slot). */
     items: BreadcrumbItem[];
     /**
-     * default on a light surface; inverse over colors/primary. Deprecated in the Figma since 27/09/2026: for the brand
-     * colour, put the Breadcrumb in a brand-mode scope and keep the default tone.
+     * neutral (default) on a light surface; inverse over colors/primary (Figma: `tone`). For the brand colour prefer a
+     * brand-mode scope (`.ds-plate`) with the neutral tone. `'default'` is deprecated (2.0.0-next): it is `'neutral'`.
      */
-    tone?: BreadcrumbTone;
+    tone?: BreadcrumbTone | 'default';
     /** More steps than this: the middle ones hide behind "…", a button that shows the whole path. */
     maxItems?: number;
     /** The link element (default `<a>`). Pass a framework Link (Next's `Link`) to navigate on the client. */

package/dist/components/breadcrumb.js

@@ -11,7 +11,7 @@ function Anchor({ href, className, children }) {
   return /* @__PURE__ */ jsx("a", { href, className, children });
 }
 function Breadcrumb(_a) {
-  var _b = _a, { items, tone = "default", maxItems = 4, linkAs: Link = Anchor, className } = _b, rest = __objRest(_b, ["items", "tone", "maxItems", "linkAs", "className"]);
+  var _b = _a, { items, tone = "neutral", maxItems = 4, linkAs: Link = Anchor, className } = _b, rest = __objRest(_b, ["items", "tone", "maxItems", "linkAs", "className"]);
   const [expanded, setExpanded] = useState(false);
   const list = useRef(null);
   const collapse = !expanded && items.length > maxItems;

package/dist/components/bubble.d.ts

@@ -1,29 +1,44 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type BubbleVariant = 'fill' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'error' | 'typing';
+/** The emphasis (Figma: `variant`). */
+type BubbleVariant = 'fill' | 'soft' | 'outline' | 'ghost';
+/** The colour (Figma: `tone`). action and danger exist only on soft. */
+type BubbleTone = 'neutral' | 'action' | 'danger';
 type BubbleAlign = 'start' | 'end';
-interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The surface (Figma: `style`). fill: the person writing, in the brand colour. muted or tinted: the one answering.
-     * outline: on a coloured background. ghost: a long answer from the assistant, no box. error: it was not sent.
-     * typing: the three dots of the one answering while they write; no text, no reactions.
-     */
-    variant?: BubbleVariant;
+interface BubbleBase extends HTMLAttributes<HTMLDivElement> {
     /** start: the one answering, the small corner bottom left; end: the person writing, bottom right. */
     align?: BubbleAlign;
     /**
-     * The message (Figma: `text`). Line breaks are kept. In `typing` it is what a screen reader hears instead of the
+     * The three dots of the one answering while they write (Figma: `typing=true`); no text, no reactions. The
+     * surface is the soft neutral one, whatever `variant` and `tone` say.
+     */
+    typing?: boolean;
+    /**
+     * The message (Figma: `text`). Line breaks are kept. With `typing` it is what a screen reader hears instead of the
      * dots, "digitando…" by default ("Ana está digitando…").
      */
     children?: ReactNode;
     /** How many reacted (Figma: `showReactions` + `reactions`). The pill goes under the text; 0 hides it. */
     reactions?: number;
 }
+/**
+ * The surface (Figma: `variant` × `tone`, only the combinations the Figma draws):
+ * - soft (default): the one answering. tone neutral (default), action (the brand tint) or danger (it was not sent).
+ * - fill: the person writing, in the brand colour. outline: on a coloured background. ghost: a long answer from the
+ *   assistant, no box. These three are neutral only.
+ */
+type BubbleProps = BubbleBase & ({
+    variant?: 'soft';
+    tone?: BubbleTone;
+} | {
+    variant: 'fill' | 'outline' | 'ghost';
+    tone?: 'neutral';
+});
 /**
  * Bubble — Figma [RDS] Chat/Bubble. The surface of a message: it grows up to 480 and wraps. Inside a Message,
  * which adds the avatar, the name and the actions. Styles: bubble.css.
  */
-declare function Bubble({ variant, align, children, reactions, className, ...rest }: BubbleProps): react.JSX.Element;
+declare function Bubble({ variant, tone, typing, align, children, reactions, className, ...rest }: BubbleProps): react.JSX.Element;
 
-export { Bubble, type BubbleAlign, type BubbleProps, type BubbleVariant };
+export { Bubble, type BubbleAlign, type BubbleProps, type BubbleTone, type BubbleVariant };

package/dist/components/bubble.js

@@ -6,8 +6,8 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ThumbsUpIcon } from "./internal/icons.js";
 function Bubble(_a) {
-  var _b = _a, { variant = "muted", align = "start", children, reactions, className } = _b, rest = __objRest(_b, ["variant", "align", "children", "reactions", "className"]);
-  if (variant === "typing") {
+  var _b = _a, { variant = "soft", tone = "neutral", typing = false, align = "start", children, reactions, className } = _b, rest = __objRest(_b, ["variant", "tone", "typing", "align", "children", "reactions", "className"]);
+  if (typing) {
     return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ role: "status" }, rest), { className: ["rds-bubble", "rds-bubble--typing", `rds-bubble--${align}`, className].filter(Boolean).join(" "), children: [
       /* @__PURE__ */ jsxs("span", { className: "rds-bubble__dots", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx("span", {}),
@@ -17,7 +17,7 @@ function Bubble(_a) {
       /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: children != null ? children : "digitando\u2026" })
     ] }));
   }
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-bubble", `rds-bubble--${variant}`, `rds-bubble--${align}`, className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-bubble", `rds-bubble--${variant}`, `rds-bubble--${tone}`, `rds-bubble--${align}`, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx("div", { className: "rds-bubble__text", children }),
     reactions !== void 0 && reactions > 0 && /* @__PURE__ */ jsx("div", { className: "rds-bubble__reactions-row", children: /* @__PURE__ */ jsxs("span", { className: "rds-bubble__reactions", children: [
       /* @__PURE__ */ jsxs("span", { className: "rds-bubble__reactions-count", "aria-hidden": "true", children: [

package/dist/components/button.d.ts

@@ -9,7 +9,7 @@ interface ButtonProps extends ComponentPropsWithRef<'button'> {
     children: ReactNode;
     /** The role: brand click (action), quiet (neutral), destructive (danger), or over the brand plate (inverse). */
     tone?: ButtonTone;
-    /** The emphasis (Figma: `style`): fill draws the most attention, ghost the least. */
+    /** The emphasis (Figma: `variant`): fill draws the most attention, ghost the least. */
     variant?: ButtonVariant;
     /**
      * The height, by the space available (Figma: `size`): sm 36, md 44 (default), lg 52. Text 14/20 on sm and md,

package/dist/components/card.d.ts

@@ -1,18 +1,27 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
+/** The surface (Figma: `variant`). */
+type CardVariant = 'surface' | 'soft' | 'outline';
+/** @deprecated Use CardVariant (2.0.0-next): default → surface, tint → soft, outline stays. */
 type CardSurface = 'default' | 'outline' | 'tint';
-type CardSize = 'default' | 'sm';
+type CardSize = 'md' | 'sm';
 type Heading = 'h2' | 'h3' | 'h4';
 interface CardProps extends HTMLAttributes<HTMLElement> {
     /**
-     * default: white, with a border and elevation/raised; the default, for a topic on its own on the page.
-     * outline: only the border, no fill nor shadow, it takes the surface underneath; for cards side by side in a grid,
-     * inside a panel or a list. tint: the brand's light plate, no border nor shadow; a rare highlight, one per screen.
+     * The surface (Figma: `variant`). surface (default): white, with a border and elevation/raised, for a topic on its
+     * own on the page. outline: only the border, no fill nor shadow, it takes the surface underneath; for cards side by
+     * side in a grid, inside a panel or a list. soft: the brand's light plate, no border nor shadow; a rare highlight,
+     * one per screen.
      */
+    variant?: CardVariant;
+    /** @deprecated Use `variant` (2.0.0-next): default → surface, tint → soft, outline → outline. */
     surface?: CardSurface;
-    /** sm pads 16 (default 24) and makes the header text smaller, for dense lists and indicators. */
-    size?: CardSize;
+    /**
+     * md (default) pads 24; sm pads 16 and makes the header text smaller, for dense lists and indicators (Figma:
+     * `size`). `'default'` is deprecated (2.0.0-next): it is `'md'`.
+     */
+    size?: CardSize | 'default';
     /** article (default) for a topic that reads on its own; section or div when it is part of something larger. */
     as?: 'article' | 'section' | 'div';
     /**
@@ -25,7 +34,7 @@ interface CardProps extends HTMLAttributes<HTMLElement> {
  * Card — Figma [RDS] Content/Card. A topic that reads on its own: a plan, a summary with an action. Never a card
  * inside a card. When it has a CardHeader, the title names the card. Styles: card.css.
  */
-declare function Card({ surface, size, as: Root, className, children, ...rest }: CardProps): react.JSX.Element;
+declare function Card({ variant, surface, size, as: Root, className, children, ...rest }: CardProps): react.JSX.Element;
 interface CardHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** What the card is about (Figma: `title`). It names the card for screen readers. */
     title: ReactNode;
@@ -33,7 +42,7 @@ interface CardHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     titleAs?: Heading;
     /** One supporting line (Figma: `showDescription` + `description`). */
     description?: ReactNode;
-    /** A Tile before the text (Figma: `showIcon`): variant soft, size default (sm on a small card). */
+    /** A Tile before the text (Figma: `showIcon`): variant soft, size md (sm on a small card). */
     icon?: ReactNode;
     /** Opt-in: one action on the right (Figma: `showAction` + `action`), a ghost Button or an IconButton. None by default. */
     action?: ReactNode;
@@ -59,4 +68,4 @@ interface CardFooterProps extends HTMLAttributes<HTMLElement> {
 /** The card's footer, with its actions (Figma: .card/footer). No band and no rule: spacing sets it apart. */
 declare function CardFooter({ align, note, className, children, ...rest }: CardFooterProps): react.JSX.Element;
 
-export { Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardSize, type CardSurface };
+export { Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardSize, type CardSurface, type CardVariant };

package/dist/components/card.js

@@ -6,9 +6,11 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useId } from "react";
+const SURFACE_TO_VARIANT = { default: "surface", tint: "soft", outline: "outline" };
 const TitleId = createContext(void 0);
 function Card(_a) {
-  var _b = _a, { surface = "default", size = "default", as: Root = "article", className, children } = _b, rest = __objRest(_b, ["surface", "size", "as", "className", "children"]);
+  var _b = _a, { variant, surface, size = "md", as: Root = "article", className, children } = _b, rest = __objRest(_b, ["variant", "surface", "size", "as", "className", "children"]);
+  const look = variant != null ? variant : surface ? SURFACE_TO_VARIANT[surface] : "surface";
   const titleId = useId();
   const labelled = Root !== "div" && !rest["aria-label"] && !rest["aria-labelledby"];
   return /* @__PURE__ */ jsx(TitleId.Provider, { value: labelled ? titleId : void 0, children: /* @__PURE__ */ jsx(
@@ -16,7 +18,7 @@ function Card(_a) {
     __spreadProps(__spreadValues({
       "aria-labelledby": labelled ? titleId : void 0
     }, rest), {
-      className: ["rds-card", `rds-card--${surface}`, size === "sm" && "rds-card--sm", className].filter(Boolean).join(" "),
+      className: ["rds-card", `rds-card--${look}`, size === "sm" && "rds-card--sm", className].filter(Boolean).join(" "),
       children
     })
   ) });

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

@@ -35,7 +35,7 @@ declare function normalizeHex(text: string): string | null;
 /**
  * ColorInput — Figma [RDS] Forms/ColorInput. One colour, chosen or typed: the swatch shows it and the hex beside it
  * is editable (#RRGGBB, with or without #). The swatch opens a popover with the palette the caller passes (Figma:
- * menu=open); without one, the system's colour picker. Enter or leaving the field confirms the hex; an invalid hex
+ * open=true); without one, the system's colour picker. Enter or leaving the field confirms the hex; an invalid hex
  * goes back to the last valid one. The swatch's colour is the person's data, not a token: it is the one inline
  * style the DS allows (style.backgroundColor of the swatch and of each palette colour). Choosing among a few fixed
  * colours without a hex is the ToggleGroup or the ChoiceCard. Styles: color-input.css and internal/field.css.

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

@@ -28,8 +28,11 @@ declare function ContextMenu({ children, items, disabled, onOpenChange, classNam
 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;
+    /**
+     * neutral (default), or danger for what destroys: last, after a separator (Figma: `tone`). `'default'` is
+     * deprecated (2.0.0-next): it is `'neutral'`.
+     */
+    tone?: ContextMenuItemTone | 'default';
     disabled?: boolean;
     textValue?: string;
 }

package/dist/components/data-table-header.d.ts

@@ -32,15 +32,15 @@ type DataTableHeaderProps = {
     onClear?: () => void;
     /**
      * A view control after the filters and before the actions (Figma: `showView` + the `view` slot), such as a
-     * Checkbox "Agrupar por produto". In view on a narrow screen too.
+     * Checkbox "Agrupar por produto". In view in the compact arrangement too.
      */
     view?: ReactNode;
     actions?: ReactNode;
     className?: string;
-    /** On a narrow screen, moves the filters and the actions into a Drawer. The quick filters stay in view. */
+    /** In the compact arrangement (bar below 1024), moves the filters and the actions into a Drawer. The quick filters stay in view. */
     mobileCollapse?: boolean;
 };
-/** One filter as a DropdownMenu of radio items (one filter on a wide screen). */
+/** One filter as a DropdownMenu of radio items (one filter, expanded). */
 declare function FilterDropdown({ f, placement }: {
     f: DataTableFilterDef;
     placement?: 'bottom-start' | 'bottom-end';
@@ -50,8 +50,13 @@ declare function FilterDropdown({ f, placement }: {
  * the Drawer: the bar above a table. The search is always on the left and takes the free width (at least 320); the
  * filters are always on the right; what does not fit wraps. Quick filters go in the `quickFilters` slot; one filter
  * is a dropdown, two or more collapse into "Filtros" (the active ones stay in view as removable Chips); the `view`
- * control comes after the filters, before the actions. From 768 the wide layout shows; below it, the filters open
- * in a Drawer or a Popover. "Filtros · N" counts the active `filters`, the ones that button opens.
+ * control comes after the filters, before the actions. "Filtros · N" counts the active `filters`, the ones that
+ * button opens.
+ *
+ * Two arrangements, by the bar's own width (a size container, as the Figma's viewport mode; the SavingBar's cut):
+ * expanded from 1024, the Separator and the Buttons with their labels; compact below it, the search accepts 200 and
+ * the filter is an outline IconButton (sliders, 44) with a dot (one filter on) or a counter (several), opening the
+ * same Drawer or Popover. There is no screen prop.
  * Styles: data-table-header.css.
  */
 declare function DataTableHeader({ search, filters, quickFilters, onClear, view, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;

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

@@ -6,6 +6,7 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Badge } from "./badge.js";
 import { Button } from "./button.js";
 import { Chip } from "./chip.js";
 import { Drawer } from "./drawer.js";
@@ -52,7 +53,7 @@ function FilterGroups({
   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)) })
+      /* @__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)),
     onClear && showClear && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", onClick: onClear, children: "Limpar filtros" })
   ] });
@@ -80,10 +81,49 @@ function FiltersPopover({
     }
   ) }) });
 }
+function CompactFilterTrigger(_e) {
+  var _f = _e, {
+    label,
+    state,
+    indicator
+  } = _f, rest = __objRest(_f, [
+    "label",
+    "state",
+    "indicator"
+  ]);
+  return /* @__PURE__ */ jsxs("span", { className: "rds-data-table-header__trigger", children: [
+    /* @__PURE__ */ jsx(Tooltip, { text: label, children: /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadProps(__spreadValues({}, rest), {
+        icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
+        label: state ? `${label}, ${state}` : label,
+        variant: "outline",
+        tone: "neutral",
+        size: "md",
+        "data-filter-toggle": ""
+      })
+    ) }),
+    indicator === "dot" && /* @__PURE__ */ jsx("span", { className: "rds-data-table-header__dot", "aria-hidden": "true" }),
+    typeof indicator === "number" && /* @__PURE__ */ jsx(Badge, { className: "rds-data-table-header__count", tone: "neutral", value: indicator, "aria-hidden": "true" })
+  ] });
+}
+function activeState(count) {
+  if (count === 0) return void 0;
+  return count === 1 ? "1 ativo" : `${count} ativos`;
+}
 function MobileSingleFilter({ f }) {
   const [open, setOpen] = useState(false);
+  const on = f.value !== "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FilterTrigger, { filter: f, onClick: () => setOpen(true) }),
+    /* @__PURE__ */ jsx(
+      CompactFilterTrigger,
+      {
+        label: f.label,
+        state: on ? optionLabel(f) : void 0,
+        indicator: on ? "dot" : void 0,
+        onClick: () => setOpen(true)
+      }
+    ),
     /* @__PURE__ */ jsx(Drawer, { open, onOpenChange: setOpen, title: f.label, children: /* @__PURE__ */ jsx(
       FilterGroups,
       {
@@ -153,11 +193,26 @@ function DataTableHeader({
         filters,
         onClear,
         showClear: activeFilterCount > 0,
-        trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
+        trigger: /* @__PURE__ */ jsx(
+          CompactFilterTrigger,
+          {
+            label: "Filtros",
+            state: activeState(activeFilterCount),
+            indicator: activeFilterCount > 0 ? activeFilterCount : void 0
+          }
+        )
       }
     ) }),
     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(
+        CompactFilterTrigger,
+        {
+          label: "Filtros",
+          state: activeState(activeFilterCount),
+          indicator: activeFilterCount === 0 ? void 0 : filters.length === 1 ? "dot" : 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,

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: "",