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

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

@@ -2,14 +2,19 @@ import * as react from 'react';
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { FieldTextProps } from './internal/field.js';
 
-type FileInputVariant = 'field' | 'dropzone' | 'tile';
+/** The field's arrangement (Figma: `layout`). */
+type FileInputLayout = 'field' | 'dropzone' | 'tile';
+/** @deprecated Use FileInputLayout (2.0.0-next: `variant` is `layout`). */
+type FileInputVariant = FileInputLayout;
 interface FileInputProps extends Omit<FieldTextProps, 'labelPosition'>, Omit<ComponentPropsWithRef<'input'>, 'type' | 'children' | 'prefix' | 'value' | 'defaultValue' | 'size'> {
     /**
-     * The shape (Figma: `variant`). field (default): the Input's box, for a dense form. dropzone: a dashed area to drop
-     * the file on, when the file is what the screen is about (a receipt, a spreadsheet). tile: a 112 square with the image's
-     * preview, for a photo or a logo.
+     * The arrangement (Figma: `layout`). field (default): the Input's box, for a dense form. dropzone: a dashed area to
+     * drop the file on, when the file is what the screen is about (a receipt, a spreadsheet). tile: a 112 square with
+     * the image's preview, for a photo or a logo.
      */
-    variant?: FileInputVariant;
+    layout?: FileInputLayout;
+    /** @deprecated Use `layout` (2.0.0-next): the same three values. */
+    variant?: FileInputLayout;
     /** Controlled: the name shown (Figma: `fileName`). By default, the chosen file's name. */
     fileName?: string;
     /** Controlled: the size beside the name in the dropzone (Figma: `fileSize`). By default, the chosen file's, as "1,2 MB". */
@@ -43,7 +48,7 @@ interface FileInputProps extends Omit<FieldTextProps, 'labelPosition'>, Omit<Com
 /** "1,2 MB", "830 KB", "512 B": the size the way a person reads it. */
 declare function formatFileSize(bytes: number): string;
 /**
- * FileInput — Figma [RDS] Forms/FileInput. A file field in three shapes (`variant`): field, the Input's box with the
+ * FileInput — Figma [RDS] Forms/FileInput. A file field in three layouts (`layout`): field, the Input's box with the
  * clip, "Escolher arquivo" and the name; dropzone, a dashed area that takes a dragged file; tile, a square with the
  * image's preview and the buttons to swap or remove it. In every shape the native <input type="file"> does the work:
  * it lies transparent over the box, so a click, Enter or Space open the system's chooser, the label names it,
@@ -51,6 +56,6 @@ declare function formatFileSize(bytes: number): string;
  * size in the hint and check them in code (a failure is the errorMessage). Styles: file-input.css and
  * internal/field.css.
  */
-declare function FileInput({ variant, label, hint, error, errorMessage, required, fileName, fileSize, preview, previewAlt, dropTitle, tileText, clearable, onClear, onFiles, clearLabel, replaceLabel, chooseLabel, emptyLabel, id, disabled, className, style, onChange, ref, ...input }: FileInputProps): react.JSX.Element;
+declare function FileInput({ layout: layoutProp, variant, label, hint, error, errorMessage, required, fileName, fileSize, preview, previewAlt, dropTitle, tileText, clearable, onClear, onFiles, clearLabel, replaceLabel, chooseLabel, emptyLabel, id, disabled, className, style, onChange, ref, ...input }: FileInputProps): react.JSX.Element;
 
-export { FileInput, type FileInputProps, type FileInputVariant, formatFileSize };
+export { FileInput, type FileInputLayout, type FileInputProps, type FileInputVariant, formatFileSize };

package/dist/components/file-input.js

@@ -25,7 +25,8 @@ function formatFileSize(bytes) {
 }
 function FileInput(_a) {
   var _b = _a, {
-    variant = "field",
+    layout: layoutProp,
+    variant,
     label,
     hint,
     error,
@@ -51,6 +52,7 @@ function FileInput(_a) {
     onChange,
     ref
   } = _b, input = __objRest(_b, [
+    "layout",
     "variant",
     "label",
     "hint",
@@ -77,23 +79,24 @@ function FileInput(_a) {
     "onChange",
     "ref"
   ]);
-  var _a2, _b2, _c;
+  var _a2, _b2, _c, _d;
+  const layout = (_a2 = layoutProp != null ? layoutProp : variant) != null ? _a2 : "field";
   warnIfUnlabelled("FileInput", label, input["aria-label"], input["aria-labelledby"]);
-  const inside = variant === "dropzone";
+  const inside = layout === "dropzone";
   const ids = useFieldIds(id, inside ? void 0 : hint, error, errorMessage);
   const { controlId, errorId, invalid } = ids;
   const own = useRef(null);
   const [chosen, setChosen] = useState(null);
   const [dragging, setDragging] = useState(false);
   useEffect(() => () => revoke(chosen), [chosen]);
-  const shownName = (_a2 = fileName != null ? fileName : chosen == null ? void 0 : chosen.name) != null ? _a2 : "";
+  const shownName = (_b2 = fileName != null ? fileName : chosen == null ? void 0 : chosen.name) != null ? _b2 : "";
   const shownSize = fileSize != null ? fileSize : fileName === void 0 && chosen ? formatFileSize(chosen.size) : void 0;
-  const shownPreview = (_b2 = preview != null ? preview : chosen == null ? void 0 : chosen.url) != null ? _b2 : "";
-  const filled = variant === "tile" ? Boolean(shownPreview) : Boolean(shownName);
+  const shownPreview = (_c = preview != null ? preview : chosen == null ? void 0 : chosen.url) != null ? _c : "";
+  const filled = layout === "tile" ? Boolean(shownPreview) : Boolean(shownName);
   const showClear = clearable && filled && !disabled;
   const insideHintId = inside && hasContent(hint) && !filled ? `${controlId}-hint` : void 0;
   const describedBy = [inside ? insideHintId : ids.hintId, errorId, input["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-  const removeName = clearLabel != null ? clearLabel : variant === "tile" ? "Remover imagem" : "Remover arquivo";
+  const removeName = clearLabel != null ? clearLabel : layout === "tile" ? "Remover imagem" : "Remover arquivo";
   function change(event) {
     const files = event.target.files;
     if (!(files == null ? void 0 : files.length)) {
@@ -101,7 +104,7 @@ function FileInput(_a) {
     } else {
       const size = Array.from(files).reduce((sum, file) => sum + file.size, 0);
       const first = files[0];
-      const url = variant === "tile" && first.type.startsWith("image/") && typeof URL.createObjectURL === "function" ? URL.createObjectURL(first) : void 0;
+      const url = layout === "tile" && first.type.startsWith("image/") && typeof URL.createObjectURL === "function" ? URL.createObjectURL(first) : void 0;
       setChosen({ name: files.length === 1 ? first.name : `${files.length} arquivos`, size, url });
     }
     onChange == null ? void 0 : onChange(event);
@@ -149,14 +152,14 @@ function FileInput(_a) {
     },
     onDrop: drop
   };
-  const covered = !(variant === "tile" && filled);
+  const covered = !(layout === "tile" && filled);
   const control = /* @__PURE__ */ jsx(
     "input",
     __spreadProps(__spreadValues({}, input), {
       ref: setRef,
       id: controlId,
       type: "file",
-      accept: (_c = input.accept) != null ? _c : variant === "tile" ? "image/*" : void 0,
+      accept: (_d = input.accept) != null ? _d : layout === "tile" ? "image/*" : void 0,
       className: ["rds-field__control", "rds-file-input__control", !covered && "rds-file-input__control--off"].filter(Boolean).join(" "),
       tabIndex: covered ? input.tabIndex : -1,
       required,
@@ -168,7 +171,7 @@ function FileInput(_a) {
   );
   const clearButton = showClear && /* @__PURE__ */ jsx(FieldAction, { label: removeName, icon: /* @__PURE__ */ jsx(CloseIcon, {}), onClick: clear });
   let face;
-  if (variant === "dropzone") {
+  if (layout === "dropzone") {
     face = filled ? /* @__PURE__ */ jsxs("span", { className: "rds-file-input__file", children: [
       /* @__PURE__ */ jsx("span", { className: "rds-file-input__circle", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PaperclipIcon, {}) }),
       /* @__PURE__ */ jsxs("span", { className: "rds-file-input__file-texts", "aria-hidden": "true", children: [
@@ -183,7 +186,7 @@ function FileInput(_a) {
         hasContent(hint) && /* @__PURE__ */ jsx("span", { id: insideHintId, className: "rds-file-input__caption", children: hint })
       ] })
     ] });
-  } else if (variant === "tile") {
+  } else if (layout === "tile") {
     face = filled ? /* @__PURE__ */ jsx("img", { className: "rds-file-input__preview", src: shownPreview, alt: previewAlt != null ? previewAlt : typeof label === "string" ? `Pr\xE9via de ${label}` : "Pr\xE9via" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "rds-file-input__tile-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ImagePlusIcon, {}) }),
       /* @__PURE__ */ jsx("span", { className: "rds-file-input__tile-text", "aria-hidden": "true", children: tileText })
@@ -198,16 +201,16 @@ function FileInput(_a) {
     ] });
   }
   const boxClassName = [
-    variant === "field" && showClear && "rds-field__box--action",
-    variant === "dropzone" && "rds-file-input__area",
-    variant === "tile" && "rds-file-input__area rds-file-input__tile",
-    variant !== "field" && filled && "rds-file-input__area--filled",
-    variant !== "field" && dragging && "rds-file-input__area--dragging"
+    layout === "field" && showClear && "rds-field__box--action",
+    layout === "dropzone" && "rds-file-input__area",
+    layout === "tile" && "rds-file-input__area rds-file-input__tile",
+    layout !== "field" && filled && "rds-file-input__area--filled",
+    layout !== "field" && dragging && "rds-file-input__area--dragging"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     FieldShell,
     {
-      kind: `rds-file-input rds-file-input--${variant}`,
+      kind: `rds-file-input rds-file-input--${layout}`,
       controlId,
       hintId: inside ? void 0 : ids.hintId,
       errorId,
@@ -218,19 +221,19 @@ function FileInput(_a) {
       required,
       disabled,
       boxClassName: boxClassName || void 0,
-      boxProps: variant === "field" ? void 0 : boxProps,
+      boxProps: layout === "field" ? void 0 : boxProps,
       className,
       style,
       children: [
         face,
         control,
-        variant === "tile" ? filled && !disabled && /* @__PURE__ */ jsxs("span", { className: "rds-file-input__actions", children: [
+        layout === "tile" ? filled && !disabled && /* @__PURE__ */ jsxs("span", { className: "rds-file-input__actions", children: [
           /* @__PURE__ */ jsx(FieldAction, { label: replaceLabel, icon: /* @__PURE__ */ jsx(UploadIcon, {}), onClick: () => {
             var _a3;
             return (_a3 = own.current) == null ? void 0 : _a3.click();
           } }),
           clearButton
-        ] }) : variant === "field" && clearButton
+        ] }) : layout === "field" && clearButton
       ]
     }
   );

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

@@ -8,17 +8,23 @@ interface FilterChipProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
     count?: ReactNode;
     /** An icon before the label, in the label's colour (Figma: `showIcon` + `icon`). Decorative. */
     icon?: ReactNode;
-    /** Controlled: the filter is on (Figma: state=active). */
-    active?: boolean;
+    /** Controlled: the filter is on (Figma: `pressed`), as the Toggle. */
+    pressed?: boolean;
     /** Uncontrolled: on at first. */
-    defaultActive?: boolean;
+    defaultPressed?: boolean;
     /** Called with the new state when the chip is pressed (a button, not a link). */
+    onPressedChange?: (pressed: boolean) => void;
+    /** @deprecated Use `pressed` (2.0.0-next). */
+    active?: boolean;
+    /** @deprecated Use `defaultPressed` (2.0.0-next). */
+    defaultActive?: boolean;
+    /** @deprecated Use `onPressedChange` (2.0.0-next). */
     onActiveChange?: (active: boolean) => void;
     /** Rendered as aria-disabled="true": stays in the tab order and takes focus, but does not turn on or navigate. */
     disabled?: boolean;
     /**
      * Render the single child element (an `<a>`, a framework `Link`) with the chip's classes, for a filter that
-     * lives in the URL and should survive back/forward. The link gets aria-current when active.
+     * lives in the URL and should survive back/forward. The link gets aria-current when pressed.
      */
     asChild?: boolean;
 }
@@ -28,7 +34,7 @@ interface FilterChipProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
  * brand tint, brand border and label. Up to 5 in a FilterChipGroup; more than that, the Select. A value that can
  * be removed is the Chip. Styles: filter-chip.css.
  */
-declare function FilterChip({ children, count, icon, active, defaultActive, onActiveChange, disabled, asChild, type, className, onClick, ...rest }: FilterChipProps): react.JSX.Element;
+declare function FilterChip({ children, count, icon, pressed: pressedProp, defaultPressed, onPressedChange, active, defaultActive, onActiveChange, disabled, asChild, type, className, onClick, ...rest }: FilterChipProps): react.JSX.Element;
 interface FilterChipGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Required: what the filters cut, such as "Filtrar por tipo". Several groups on a page must be told apart. */
     'aria-label': string;

package/dist/components/filter-chip.js

@@ -13,8 +13,11 @@ function FilterChip(_a) {
     children,
     count,
     icon,
+    pressed: pressedProp,
+    defaultPressed,
+    onPressedChange,
     active,
-    defaultActive = false,
+    defaultActive,
     onActiveChange,
     disabled,
     asChild,
@@ -25,6 +28,9 @@ function FilterChip(_a) {
     "children",
     "count",
     "icon",
+    "pressed",
+    "defaultPressed",
+    "onPressedChange",
     "active",
     "defaultActive",
     "onActiveChange",
@@ -34,20 +40,23 @@ function FilterChip(_a) {
     "className",
     "onClick"
   ]);
-  const [own, setOwn] = useState(defaultActive);
-  const on = active != null ? active : own;
+  var _a2;
+  const pressed = pressedProp != null ? pressedProp : active;
+  const [own, setOwn] = useState((_a2 = defaultPressed != null ? defaultPressed : defaultActive) != null ? _a2 : false);
+  const on = pressed != null ? pressed : own;
   const Root = asChild ? Slot : "button";
   function click(event) {
+    var _a3;
     onClick == null ? void 0 : onClick(event);
     if (event.defaultPrevented || asChild) return;
-    if (active === void 0) setOwn(!on);
-    onActiveChange == null ? void 0 : onActiveChange(!on);
+    if (pressed === void 0) setOwn(!on);
+    (_a3 = onPressedChange != null ? onPressedChange : onActiveChange) == null ? void 0 : _a3(!on);
   }
   return /* @__PURE__ */ jsxs(
     Root,
     __spreadProps(__spreadValues({}, rest), {
       type: asChild ? void 0 : type,
-      className: ["rds-filter-chip", on && "rds-filter-chip--active", className].filter(Boolean).join(" "),
+      className: ["rds-filter-chip", on && "rds-filter-chip--pressed", className].filter(Boolean).join(" "),
       "aria-pressed": asChild ? void 0 : on,
       "aria-current": asChild && on ? "true" : void 0,
       "aria-disabled": disabled || void 0,

package/dist/components/heading.d.ts

@@ -3,15 +3,18 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 /** The [RDS] type scale for titles: band 36/48, heading 24/30, value 20/30. */
 type HeadingLevel = 'band' | 'heading' | 'value';
-/** default: text/heading (navy on light in Rojão, white on dark and on the brand plate). accent: the logo orange. */
-type HeadingTone = 'default' | 'accent';
+/** neutral: text/heading (navy on light in Rojão, white on dark and on the brand plate). accent: the logo orange. */
+type HeadingTone = 'neutral' | 'accent';
 /** The element in the page outline. The visual level never decides it: the order of the page does. */
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     /** The size, from the type scale (Figma `level`). */
     level?: HeadingLevel;
-    /** The colour of the brand pair (Figma `tone`). The Mark takes the other one. */
-    tone?: HeadingTone;
+    /**
+     * The colour of the brand pair (Figma `tone`): neutral (default) or accent. The Mark takes the other one.
+     * `'default'` is deprecated (2.0.0-next): it is `'neutral'`.
+     */
+    tone?: HeadingTone | 'default';
     /** The heading element. Default h2. */
     as?: HeadingElement;
     /** The text (Figma `text`), with an optional <Heading.Mark> stretch (Figma `showMark` + `mark`). */
@@ -22,12 +25,12 @@ interface HeadingMarkProps extends HTMLAttributes<HTMLSpanElement> {
 }
 /**
  * Heading.Mark — Figma [RDS] .heading/mark. A stretch of the title in the other colour of the pair: accent inside a
- * default Heading, default inside an accent one. A plain span: screen readers read the whole title, unannounced.
+ * neutral Heading, neutral inside an accent one. A plain span: screen readers read the whole title, unannounced.
  */
 declare function HeadingMark({ className, children, ...rest }: HeadingMarkProps): react.JSX.Element;
 /**
  * Heading — Figma [RDS] Content/Heading. A title in the brand pair: one colour, or both in the same title with a
- * Heading.Mark. The colour is chosen per screen; tone=default is the rule. Orange on white fails contrast even for
+ * Heading.Mark. The colour is chosen per screen; tone=neutral is the rule. Orange on white fails contrast even for
  * a large title (2.9:1 in Rojão): tone=accent belongs on dark or on the brand plate. Styles: heading.css.
  */
 declare function HeadingRoot({ level, tone, as: Tag, className, children, ...rest }: HeadingProps): react.JSX.Element;

package/dist/components/heading.js

@@ -9,7 +9,7 @@ function HeadingMark(_a) {
   return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-heading__mark", className].filter(Boolean).join(" "), children }));
 }
 function HeadingRoot(_c) {
-  var _d = _c, { level = "heading", tone = "default", as: Tag = "h2", className, children } = _d, rest = __objRest(_d, ["level", "tone", "as", "className", "children"]);
+  var _d = _c, { level = "heading", tone = "neutral", as: Tag = "h2", className, children } = _d, rest = __objRest(_d, ["level", "tone", "as", "className", "children"]);
   return /* @__PURE__ */ jsx(
     Tag,
     __spreadProps(__spreadValues({}, rest), {

package/dist/components/icon-button.d.ts

@@ -9,7 +9,7 @@ interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
     label: string;
     /** Same tones as the Button. */
     tone?: ButtonTone;
-    /** Figma calls this property `style`. */
+    /** The emphasis (Figma: `variant`). */
     variant?: ButtonVariant;
     /**
      * The size of the square (Figma: `size`): sm 36 with a 16 icon, md 44 with a 20 icon (default), lg 52 with a 24

package/dist/components/image-upload.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { CropPreset } from './image-crop-dialog.js';
 
 /**
- * @deprecated Use `<FileInput variant="tile">` (Figma [RDS] Forms/FileInput): the image's square with the preview
+ * @deprecated Use `<FileInput layout="tile">` (Figma [RDS] Forms/FileInput): the image's square with the preview
  * and the swap and remove buttons. ImageUpload is now a thin wrapper over it that keeps most of the 1.x API compiling and
  * keeps the upload (`onUpload`) and the crop (`crop`). It is always the tile (`variant`, `aspect` and the preview
  * class names left in 2.0): an image asks for a preview.
@@ -49,7 +49,7 @@ interface ImageUploadProps {
     crop?: ImageUploadCrop;
     labels?: Partial<ImageUploadLabels>;
 }
-/** @deprecated Use `<FileInput variant="tile">`, with the upload in its `onFiles` and the URL in `preview`. */
+/** @deprecated Use `<FileInput layout="tile">`, with the upload in its `onFiles` and the URL in `preview`. */
 declare function ImageUpload({ name, value, onChange, onUpload, label, hint, accept, className, crop, labels, }: ImageUploadProps): react.JSX.Element;
 
 export { ImageUpload, type ImageUploadCrop, type ImageUploadLabels, type ImageUploadProps };

package/dist/components/image-upload.js

@@ -63,7 +63,7 @@ function ImageUpload({
       FileInput,
       {
         ref: input,
-        variant: "tile",
+        layout: "tile",
         label,
         "aria-label": label ? void 0 : L.aria,
         hint,

package/dist/components/index.d.ts

@@ -15,7 +15,7 @@ export { Status, StatusProps, StatusSize, StatusTone, StatusVariant } from './st
 export { Delta, DeltaDirection, DeltaProps, DeltaTone } from './delta.js';
 export { Progress, ProgressKind, ProgressProps, ProgressSize } from './progress.js';
 export { StarRating, StarRatingProps, StarRatingSize } from './star-rating.js';
-export { Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardSize, CardSurface } from './card.js';
+export { Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardSize, CardSurface, CardVariant } from './card.js';
 export { Tile, TileProps, TileSize, TileTone, TileVariant } from './tile.js';
 export { Kbd, KbdGroup, KbdGroupProps, KbdProps } from './kbd.js';
 export { Sparkline, SparklineProps } from './sparkline.js';
@@ -57,8 +57,8 @@ export { SettingsList, SettingsListProps } from './settings-list.js';
 export { Dropzone, DropzoneProps } from './dropzone.js';
 export { MediaTile, MediaTileAspect, MediaTileProps } from './media-tile.js';
 export { Attachment, AttachmentOrientation, AttachmentProps, AttachmentStatus } from './attachment.js';
-export { Bubble, BubbleAlign, BubbleProps, BubbleVariant } from './bubble.js';
-export { Marker, MarkerProps, MarkerVariant } from './marker.js';
+export { Bubble, BubbleAlign, BubbleProps, BubbleTone, BubbleVariant } from './bubble.js';
+export { Marker, MarkerKind, MarkerProps, MarkerVariant } from './marker.js';
 export { Message, MessageAlign, MessageProps } from './message.js';
 export { MessageScroller, MessageScrollerProps } from './message-scroller.js';
 export { Questionnaire, QuestionnaireAnswer, QuestionnaireProps } from './questionnaire.js';
@@ -66,7 +66,7 @@ export { TypingIndicator, TypingIndicatorProps } from './typing-indicator.js';
 export { ChoiceCarousel, ChoiceCarouselProps } from './choice-carousel.js';
 export { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from './tabs.js';
 export { PageHeader, PageHeaderHeading, PageHeaderProps } from './page-header.js';
-export { Sidebar, SidebarHeader, SidebarItem, SidebarItemProps, SidebarProps, SidebarSection, SidebarSectionProps, SidebarSeparator, SidebarTone } from './sidebar.js';
+export { Sidebar, SidebarHeader, SidebarItem, SidebarItemProps, SidebarProps, SidebarSection, SidebarSectionProps, SidebarSeparator } from './sidebar.js';
 export { NavigationMenu, NavigationMenuEntry, NavigationMenuLink, NavigationMenuLinkComponent, NavigationMenuProps } from './navigation-menu.js';
 export { SavingBar, SavingBarProps, SavingBarStatus } from './saving-bar.js';
 export { SavingBarProvider, SavingBarRegistration, SavingBarRoot, usePageSavingBar } from './saving-bar-context.js';
@@ -79,7 +79,7 @@ export { Tooltip, TooltipProps, TooltipSide } from './tooltip.js';
 export { ToastFn, ToastOptions, ToastTone, ToastVariant, ToastView, ToastViewProps, Toaster, ToasterProps, toast, toastClassName, useToast } from './toast.js';
 export { Separator, SeparatorOrientation, SeparatorProps } from './separator.js';
 export { Heading, HeadingElement, HeadingLevel, HeadingMark, HeadingMarkProps, HeadingProps, HeadingTone } from './heading.js';
-export { Avatar, AvatarGroup, AvatarGroupProps, AvatarGroupSize, AvatarProps, AvatarSize, AvatarType, AvatarVariant, initials } from './avatar.js';
+export { Avatar, AvatarContent, AvatarGroup, AvatarGroupProps, AvatarGroupSize, AvatarProps, AvatarSize, AvatarType, AvatarVariant, initials } from './avatar.js';
 export { IconButton, IconButtonProps } from './icon-button.js';
 export { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from './button-group.js';
 export { ActionBar, ActionBarProps } from './action-bar.js';
@@ -92,7 +92,7 @@ export { Accordion, AccordionItem, AccordionItemProps, AccordionProps } from './
 export { Slider, SliderProps } from './slider.js';
 export { Listbox, ListboxOption, ListboxOptionProps, ListboxProps } from './listbox.js';
 export { Calendar, CalendarProps } from './calendar.js';
-export { FileInput, FileInputProps, FileInputVariant, formatFileSize } from './file-input.js';
+export { FileInput, FileInputLayout, FileInputProps, FileInputVariant, formatFileSize } from './file-input.js';
 export { NumberInput, NumberInputProps, NumberInputStep } from './number-input.js';
 export { InputOTP, InputOTPLength, InputOTPProps } from './input-otp.js';
 export { Combobox, ComboboxMultipleProps, ComboboxOption, ComboboxProps, ComboboxSingleProps } from './combobox.js';

package/dist/components/internal/button.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { MouseEventHandler, MouseEvent } from 'react';
 
 type ButtonTone = 'action' | 'neutral' | 'danger' | 'inverse';
-/** Figma calls this property `style`; here it is `variant` because `style` belongs to React. */
+/** The emphasis (Figma: `variant`): fill, outline or ghost. */
 type ButtonVariant = 'fill' | 'outline' | 'ghost';
 /**
  * The height: sm 36, md 44 (the default), lg 52. The touch target is 44 in every size: on sm, an invisible layer

package/dist/components/internal/menu.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-type MenuItemTone = 'default' | 'danger';
+/** neutral (default) or danger (Figma: `tone`). */
+type MenuItemTone = 'neutral' | 'danger';
 interface MenuItemContentProps {
     /** The action, a verb ("Duplicar") (Figma: `label`). */
     children: ReactNode;
@@ -10,7 +11,7 @@ interface MenuItemContentProps {
     /** A keyboard shortcut shown on the right (Figma: `showShortcut`), such as "Ctrl D". Not announced. */
     shortcut?: ReactNode;
 }
-declare const menuItemClassName: (tone?: MenuItemTone, extra?: string) => string;
+declare const menuItemClassName: (tone?: MenuItemTone | "default", extra?: string) => string;
 declare function MenuItemContent({ children, icon, shortcut }: MenuItemContentProps): react.JSX.Element;
 
 export { MenuItemContent, type MenuItemContentProps, type MenuItemTone, menuItemClassName };

package/dist/components/internal/menu.js

@@ -1,6 +1,6 @@
 import "../../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const menuItemClassName = (tone = "default", extra) => ["rds-menu__item", tone === "danger" && "rds-menu__item--danger", extra].filter(Boolean).join(" ");
+const menuItemClassName = (tone = "neutral", extra) => ["rds-menu__item", tone === "danger" && "rds-menu__item--danger", extra].filter(Boolean).join(" ");
 function MenuItemContent({ children, icon, shortcut }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "rds-menu__icon", "aria-hidden": "true", children: icon }),

package/dist/components/internal/toggle.d.ts

@@ -1,4 +1,4 @@
-/** Figma calls this property `style`: ghost in a toolbar, outline when it stands alone. */
+/** The emphasis (Figma: `variant`): ghost in a toolbar, outline when it stands alone. */
 type ToggleVariant = 'ghost' | 'outline';
 declare function toggleClassName(variant: ToggleVariant, extra?: string): string;
 /** A toggle without visible text needs a name, or a screen reader only says "toggle button". */

package/dist/components/item.d.ts

@@ -1,8 +1,9 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-type ItemVariant = 'default' | 'outline' | 'muted';
-type ItemSize = 'default' | 'sm';
+/** The emphasis (Figma: `variant`). */
+type ItemVariant = 'ghost' | 'outline' | 'soft';
+type ItemSize = 'md' | 'sm';
 interface ItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** The thing's name (Figma: `title`). */
     title: ReactNode;
@@ -12,10 +13,16 @@ interface ItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     media?: ReactNode;
     /** One action or control on the right (Figma: `showAction` + `action`): a ghost Button, an IconButton, a Switch. */
     action?: ReactNode;
-    /** default: loose in the list, a line between rows; outline: each row a block; muted: a background, no border. */
-    variant?: ItemVariant;
-    /** sm for dense lists: 14 and 12 text, 8 12 padding. */
-    size?: ItemSize;
+    /**
+     * ghost (default): loose in the list, a line between rows; outline: each row a block; soft: a background, no
+     * border (Figma: `variant`). `'default'` and `'muted'` are deprecated (2.0.0-next): they are ghost and soft.
+     */
+    variant?: ItemVariant | 'default' | 'muted';
+    /**
+     * md (default) or sm for dense lists: 14 and 12 text, 8 12 padding (Figma: `size`). `'default'` is deprecated
+     * (2.0.0-next): it is `'md'`.
+     */
+    size?: ItemSize | 'default';
 }
 /**
  * Item — Figma [RDS] Content/Item. One row of a list: media, title, description and one action. Inside an ItemGroup
@@ -26,7 +33,7 @@ interface ItemGroupProps extends HTMLAttributes<HTMLUListElement> {
     /** The Items. One variant for the whole list. */
     children: ReactNode;
 }
-/** The list the Items go in (<ul>). default rows get a line between them; outline and muted rows a gap of 8. */
+/** The list the Items go in (<ul>). ghost rows get a line between them; outline and soft rows a gap of 8. */
 declare function ItemGroup({ className, children, ...rest }: ItemGroupProps): react.JSX.Element;
 
 export { Item, ItemGroup, type ItemGroupProps, type ItemProps, type ItemSize, type ItemVariant };

package/dist/components/item.js

@@ -6,14 +6,17 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+const LEGACY_VARIANT = { default: "ghost", muted: "soft" };
 const InGroup = createContext(false);
 function Item(_a) {
-  var _b = _a, { title, description, media, action, variant = "default", size = "default", className } = _b, rest = __objRest(_b, ["title", "description", "media", "action", "variant", "size", "className"]);
+  var _b = _a, { title, description, media, action, variant = "ghost", size = "md", className } = _b, rest = __objRest(_b, ["title", "description", "media", "action", "variant", "size", "className"]);
+  var _a2;
   const Root = useContext(InGroup) ? "li" : "div";
+  const look = (_a2 = LEGACY_VARIANT[variant]) != null ? _a2 : variant;
   return /* @__PURE__ */ jsxs(
     Root,
     __spreadProps(__spreadValues({}, rest), {
-      className: ["rds-item", `rds-item--${variant}`, size === "sm" && "rds-item--sm", className].filter(Boolean).join(" "),
+      className: ["rds-item", `rds-item--${look}`, size === "sm" && "rds-item--sm", className].filter(Boolean).join(" "),
       children: [
         media && /* @__PURE__ */ jsx("span", { className: "rds-item__media", children: media }),
         /* @__PURE__ */ jsxs("span", { className: "rds-item__content", children: [

package/dist/components/marker.d.ts

@@ -1,9 +1,17 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
+/** The marker's shape (Figma: `kind`): it is the form, not the emphasis, so it is not a `variant`. */
+type MarkerKind = 'inline' | 'border' | 'separator';
+/** @deprecated Use MarkerKind (2.0.0-next: `variant` is `kind`, and default is inline). */
 type MarkerVariant = 'default' | 'border' | 'separator';
 interface MarkerProps extends HTMLAttributes<HTMLDivElement> {
-    /** default: icon and text; border: with a line under it, to split rows; separator: the text between two lines. */
+    /**
+     * inline (default): icon and text; border: with a line under it, to split rows; separator: the text between two
+     * lines (Figma: `kind`).
+     */
+    kind?: MarkerKind;
+    /** @deprecated Use `kind` (2.0.0-next): default → inline, border and separator stay. */
     variant?: MarkerVariant;
     /** The assistant's status, a system note or a date (Figma: `text`). */
     children: ReactNode;
@@ -19,6 +27,6 @@ interface MarkerProps extends HTMLAttributes<HTMLDivElement> {
  * Marker — Figma [RDS] Chat/Marker. A line inside the conversation that is not a message: the assistant's status
  * ("Buscando…"), a system note or a date between two lines. Styles: marker.css.
  */
-declare function Marker({ variant, children, icon, loading, className, ...rest }: MarkerProps): react.JSX.Element;
+declare function Marker({ kind: kindProp, variant, children, icon, loading, className, ...rest }: MarkerProps): react.JSX.Element;
 
-export { Marker, type MarkerProps, type MarkerVariant };
+export { Marker, type MarkerKind, type MarkerProps, type MarkerVariant };

package/dist/components/marker.js

@@ -7,10 +7,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { SparklesIcon } from "./internal/icons.js";
 import { Spinner } from "./spinner.js";
 function Marker(_a) {
-  var _b = _a, { variant = "default", children, icon = /* @__PURE__ */ jsx(SparklesIcon, {}), loading, className } = _b, rest = __objRest(_b, ["variant", "children", "icon", "loading", "className"]);
-  const classes = ["rds-marker", `rds-marker--${variant}`, className].filter(Boolean).join(" ");
+  var _b = _a, { kind: kindProp, variant, children, icon = /* @__PURE__ */ jsx(SparklesIcon, {}), loading, className } = _b, rest = __objRest(_b, ["kind", "variant", "children", "icon", "loading", "className"]);
+  const kind = kindProp != null ? kindProp : variant === "default" || variant === void 0 ? "inline" : variant;
+  const classes = ["rds-marker", `rds-marker--${kind}`, className].filter(Boolean).join(" ");
   const role = loading ? "status" : void 0;
-  if (variant === "separator") {
+  if (kind === "separator") {
     return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ role }, rest), { className: classes, children: [
       /* @__PURE__ */ jsx("span", { className: "rds-marker__line", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("span", { className: "rds-marker__text", children }),

package/dist/components/progress.d.ts

@@ -3,7 +3,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 /** task: something moving to the end (upload, import). measure: a value inside a known range (quota used). */
 type ProgressKind = 'task' | 'measure';
-type ProgressSize = 'default' | 'sm';
+type ProgressSize = 'md' | 'sm';
 interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** 0 to `max` (Figma: `value`, 0 to 100 in steps of 5; the code takes any value). */
     value: number;
@@ -18,8 +18,8 @@ interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>
     valueText?: ReactNode;
     /** task → role="progressbar"; measure → role="meter". */
     kind?: ProgressKind;
-    /** default: 8px bar; sm: 4px, for dense lists (Figma: `size`). */
-    size?: ProgressSize;
+    /** md: 8px bar (default); sm: 4px, for dense lists (Figma: `size`). `'default'` is deprecated (2.0.0-next): it is `'md'`. */
+    size?: ProgressSize | 'default';
 }
 /**
  * Progress — Figma [RDS] Indicators/Progress. A bar with a value: the track is the brand tint, the fill the first

package/dist/components/progress.js

@@ -15,7 +15,7 @@ function Progress(_a) {
     showValue = true,
     valueText,
     kind = "task",
-    size = "default",
+    size = "md",
     className
   } = _b, rest = __objRest(_b, [
     "value",
@@ -32,7 +32,7 @@ function Progress(_a) {
   const clamped = Math.min(Math.max(value, 0), max);
   const percent = max > 0 ? clamped / max * 100 : 0;
   const text = valueText != null ? valueText : `${Math.round(percent)}%`;
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-progress", `rds-progress--${size}`, className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-progress", `rds-progress--${size === "default" ? "md" : size}`, className].filter(Boolean).join(" "), children: [
     (showLabel || showValue) && /* @__PURE__ */ jsxs("div", { className: "rds-progress__row", children: [
       showLabel && /* @__PURE__ */ jsx("span", { id: labelId, className: "rds-progress__label", children: label }),
       showValue && /* @__PURE__ */ jsx("span", { className: "rds-progress__value", "aria-hidden": "true", children: text })

package/dist/components/row-actions.d.ts

@@ -4,6 +4,9 @@ import { ReactNode } from 'react';
 interface RowActionItem {
     label: string;
     icon?: ReactNode;
+    /** neutral (default) or danger: danger items go last, after a separator. */
+    tone?: 'neutral' | 'danger';
+    /** @deprecated Use `tone` (2.0.0-next): default → neutral, danger stays. */
     variant?: 'default' | 'danger';
     disabled?: boolean;
     onClick: () => void;