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

package/README.md

@@ -26,7 +26,7 @@ Add `dark` to `<html>` (or any element) for dark mode:
 <html class="dark">
 ```
 
-The stylesheet declares its layers first (`rds.theme`, `rds.tokens`, `rds.components`), so your own unlayered CSS
+The stylesheet declares its layers first (`rds.legacy`, `rds.theme`, `rds.tokens`, `rds.components`), so your own unlayered CSS
 always wins over the design system without `!important`. The components need no Tailwind and no other stylesheet.
 
 ### Legacy: `base.css` (deprecated)
@@ -42,6 +42,41 @@ utilities (`bg-surface-*`, `text-fg-*`, `h-control-*`…) and its CSS variables,
 @import "@rojaostudio/ds/styles/rds.css";
 ```
 
+Both stylesheets declare the same layer order, `rds.legacy, rds.theme, rds.tokens, rds.components`, and everything
+in `base.css` (its variables, the primitives, the `h1`–`h6` rule, the `rojao-*` animations) lives in `rds.legacy`.
+So, whatever the import order, the 2.0 wins wherever the two declare the same variable: 31 names, among them
+`--surface-page`, `--text-muted`, `--text-disabled`, `--border-default`, `--border-strong`, `--radius-card`,
+`--radius-control`, `--z-modal`, `--z-dropdown`, `--z-tooltip`, `--space-4` … `--space-64`, `--toast-text`,
+`--toast-border`. A 1.x utility that reads one of them (`bg-surface-page`, `text-fg-muted` through
+`--text-muted`) shows the 2.0 value while both are imported; the 1.x-only names (`--brand-primary`,
+`--surface-default`…) keep theirs. Tailwind's `@utility` and `@theme` blocks stay at the top level, as Tailwind
+requires, and the focus ring stays in Tailwind's `base` layer, so `outline-none` still wins over it. Your own
+unlayered CSS wins over all of it.
+
+## Theme scopes
+
+The shipped theme switches on `.dark`, `.ds-plate` and `.ds-scope`, and on three generic attributes:
+`data-rds-mode="dark"`, `data-rds-plate` and `data-rds-scope`. The component tokens are declared again on each of
+them (`RDS_SCOPE_SELECTORS` in `@rojaostudio/ds-core/generate`): a component token holds `var(--theme-role)`, which
+resolves where it is declared, so a theme switched on an element none of them match would repaint the roles but
+not the components inside.
+
+```html
+<section data-rds-mode="dark">…</section>   <!-- a dark section on a light page -->
+```
+
+For your own theme, `emitRdsCss(theme, { scope, dark, plate })` checks each selector against that list and throws
+on one the components would not follow:
+
+```ts
+emitRdsCss(theme, { scope: ".my-scope[data-rds-scope]" });          // <div class="my-scope" data-rds-scope>
+emitRdsCss(theme, { scope: ":root", dark: ':root[data-theme="dark"]' }); // next-themes, attribute="data-theme"
+emitRdsCss(theme, { scope: ".my-scope" });                           // throws: add data-rds-scope
+```
+
+A dark selector anchored at the root (`:root[…]`, `html…`) is used as is, which is where next-themes puts its
+attribute. `allowUncovered: true` skips the check, for a theme read only by your own CSS.
+
 ## Import the component, not the barrel
 
 ```tsx
@@ -99,7 +134,7 @@ renders itself (the × of Alert, Dialog and Toast, the Calendar and Carousel arr
 ## Requirements
 
 React 19. Tailwind CSS is an **optional** peer: only the legacy `base.css` needs it. A few components bring an
-optional peer of their own, installed only if you use them: `react-image-crop` (ImageCropModal, ImageUpload) and
+optional peer of their own, installed only if you use them: `react-image-crop` (ImageCropDialog, ImageUpload) and
 `react-international-phone` (PhoneInput).
 
 ## Icons
@@ -115,6 +150,11 @@ import { PixIcon } from '@rojaostudio/ds/icons';
 
 ## React Native
 
+> **Experimental, outside semver in 2.0.** The native target (`@rojaostudio/ds/native/*`) still follows the 1.x
+> API (`Button variant="primary"`, `Modal`, `Menu`…) and the 1.x theme (`generateTheme`). It will be aligned with
+> the 2.0 components in 2.1; until then it may change in any release, minor and patch included. Pin an exact
+> version if you depend on it. The web components never import from it.
+
 ```tsx
 import { DSThemeProvider } from '@rojaostudio/ds/native/components';
 

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,66 @@
+# Avisos de terceiros
+
+O Rojão DS é distribuído sob a [licença MIT](../../LICENSE). Alguns trechos vêm de projetos de terceiros, ou se apoiam neles, sob as licenças abaixo.
+
+## Incluído no pacote
+
+### Lucide (ícones)
+
+Os SVGs em `packages/ds/icons/svg/` e os traçados de `packages/ds/components/internal/icons.tsx` vêm do [Lucide](https://lucide.dev), sob a licença ISC. Parte do Lucide vem do Feather, sob a licença MIT.
+
+```
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT).
+All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is
+hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
+INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
+DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+```
+
+```
+The MIT License (MIT) — Feather
+
+Copyright (c) 2013-2022 Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without
+limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+Software, and to permit persons to whom the Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
+```
+
+### Pix
+
+O símbolo do Pix (`packages/ds/icons/pix.tsx`) é marca do Banco Central do Brasil. Ele está aqui só para indicar o Pix como meio de pagamento, conforme o manual de uso da marca. A licença MIT deste projeto não se estende a ele.
+
+## Dependências (instaladas pelo gerenciador de pacotes, não redistribuídas)
+
+| Pacote | Licença | Uso |
+|---|---|---|
+| `@radix-ui/react-*` | MIT | comportamento acessível de overlays, menus, abas e afins |
+| `lucide-react` (peer opcional) | ISC | re-exportação de ícones em `@rojaostudio/ds/icons` |
+| `react-image-crop` (peer opcional) | ISC | recorte do `ImageCropDialog` |
+| `react-international-phone` (peer opcional) | MIT | campo e bandeiras do `PhoneInput` |
+
+## Fontes (referenciadas pelo nome, não distribuídas)
+
+| Fonte | Licença |
+|---|---|
+| Inter | SIL Open Font License 1.1 |
+| Roboto Mono | Apache License 2.0 |

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,14 +1,27 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type CardSurface = 'default' | 'tint';
-type CardSize = 'default' | 'sm';
+/** 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 = 'md' | 'sm';
 type Heading = 'h2' | 'h3' | 'h4';
 interface CardProps extends HTMLAttributes<HTMLElement> {
-    /** tint is the brand's light background, with no border, for a card that stands out. */
+    /**
+     * 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 aligns everything on 12 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';
     /**
@@ -21,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;
@@ -29,9 +42,9 @@ 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;
-    /** One action on the right (Figma: `showAction` + `action`): a ghost Button or an IconButton. */
+    /** Opt-in: one action on the right (Figma: `showAction` + `action`), a ghost Button or an IconButton. None by default. */
     action?: ReactNode;
     /** start: side by side; center: stacked and centred. */
     align?: 'start' | 'center';
@@ -42,14 +55,17 @@ type CardContentProps = HTMLAttributes<HTMLDivElement>;
 /** The card's content (Figma: the `cardContent` slot). */
 declare function CardContent({ className, ...rest }: CardContentProps): react.JSX.Element;
 interface CardFooterProps extends HTMLAttributes<HTMLElement> {
-    /** One or two Buttons (Figma: `actions` one · two). A third action goes into the content, as a link. */
+    /**
+     * One or two Buttons (Figma: `actions` one · two), side by side: the main one (action fill) last, the secondary one
+     * a neutral ghost Button before it. A third action goes into the content, as a link.
+     */
     children: ReactNode;
-    /** start, end, or full (buttons stacked across the whole width). */
+    /** start, end (default), or full (the two side by side, half each, for a narrow card on a phone). */
     align?: 'start' | 'end' | 'full';
     /** A line under the buttons (Figma: `showTertiaryContent` + `tertiaryContent`), such as a sign-up link. */
     note?: ReactNode;
 }
-/** The card's footer, with its actions (Figma: .card/footer). */
+/** 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/chart.d.ts

@@ -10,7 +10,7 @@ interface ChartSeries {
     /** line only: which axis it reads on. right only when the two series have different units (volume and rate). */
     axis?: 'left' | 'right';
 }
-interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onSelect'> {
     /** What the chart shows, with the period. It names the chart and captions its data table. */
     label: string;
     /** line: lines over time; bar: a ranking in horizontal bars; column: columns by category. */
@@ -32,18 +32,28 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     showLegend?: boolean;
     /** The values of the point under the pointer or the keyboard (Figma: `showTooltip`). */
     showTooltip?: boolean;
-    /** Off: only the first, middle and last label (Figma: `showAllDates`). Use it under about 360 px. */
+    /**
+     * line and column: which x labels show (Figma: `dates`). edges, the default: the first, middle and last; all: every
+     * label, for short series only.
+     */
+    dates?: 'edges' | 'all';
+    /** line and column: one label every N points, with a tick on every point (Figma: `dates=every`). Wins over `dates`. */
+    dateEvery?: number;
+    /** @deprecated Use `dates="all"` (true) or `dates="edges"` (false). */
     showAllDates?: boolean;
+    /**
+     * bar and column: where each item leads, in the order of `labels`. In bar each bar becomes a link named
+     * "<label>: <value>"; in column a click or Enter on the plot follows the item's link. Only http(s) URLs, relative
+     * paths and #fragments are followed; any other scheme (javascript:, data:…) is ignored, with a warning in dev.
+     */
+    hrefs?: Array<string | undefined>;
+    /** bar and column: called with the item's index when it is chosen (click, Enter). In bar each bar becomes a button. */
+    onSelect?: (index: number) => void;
     /** Show the data table under the chart. By default it is there only for screen readers. */
     showTable?: boolean;
     /** Height of the plot area, in px (Figma: 200). */
     height?: number;
 }
-/**
- * Chart — Figma [RDS] Content/Chart. The chart area, to go inside a Card. Every chart carries a table with the same
- * data (visually hidden unless `showTable`). In line and column the plot is a slider for screen readers and the
- * keyboard: the arrows move from point to point, and each point is read with its label and values. Styles: chart.css.
- */
-declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, showAllDates, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
+declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, dates, dateEvery, showAllDates, hrefs: hrefsProp, onSelect, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
 
 export { Chart, type ChartProps, type ChartSeries, type ChartType };