@rojaostudio/ds 2.0.0-next.2 → 2.0.0-next.20

package/dist/components/index.d.ts

@@ -8,14 +8,14 @@ export { DropdownMenu, DropdownMenuAlign, DropdownMenuItem, DropdownMenuItemProp
 export { ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuItemTone, ContextMenuProps, ContextMenuSeparator } from './context-menu.js';
 export { Command, CommandGroup, CommandGroupProps, CommandItem, CommandItemProps, CommandProps } from './command.js';
 export { FilterChip, FilterChipGroup, FilterChipGroupProps, FilterChipProps } from './filter-chip.js';
-export { DataTableFilterDef, DataTableFilterOption, DataTableHeader, DataTableHeaderProps, DataTableHeaderSearch, DataTablePillDef, FilterDropdown } from './data-table-header.js';
+export { DataTableFilterDef, DataTableFilterOption, DataTableHeader, DataTableHeaderProps, DataTableHeaderSearch, FilterDropdown } from './data-table-header.js';
 export { Button, ButtonIconPosition, ButtonProps } from './button.js';
 export { Badge, BadgeProps, BadgeTone, BadgeVariant, formatBadgeValue } from './badge.js';
 export { Status, StatusProps, StatusSize, StatusTone, StatusVariant } from './status.js';
 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';
@@ -38,15 +38,17 @@ export { Empty, EmptyProps } from './empty.js';
 export { InsightCard, InsightCardProps, InsightCardType } from './insight-card.js';
 export { SectionCard, SectionCardProps } from './section-card.js';
 export { SectionHeader, SectionHeaderProps } from './section-header.js';
+export { Stepper, StepperProps, StepperStep } from './stepper.js';
 export { FloatingStepper, FloatingStepperProps, FloatingStepperStep } from './floating-stepper.js';
 export { Stat, StatProps, StatTone } from './stat.js';
 export { SummaryBar, SummaryBarItem, SummaryBarLayout, SummaryBarProps, SummaryBarTone } from './summary-bar.js';
-export { ToggleCard, ToggleCardProps } from './toggle-card.js';
+export { ToggleCard, ToggleCardLayout, ToggleCardProps } from './toggle-card.js';
 export { ToggleCardCompact, ToggleCardCompactProps } from './toggle-card-compact.js';
 export { ChipInput, ChipInputProps } from './chip-input.js';
 export { CopyField, CopyFieldProps } from './copy-field.js';
 export { QRDisplay, QRDisplayProps } from './qr-display.js';
 export { ChoiceCard } from './choice-card.js';
+export { ChoiceList, ChoiceListItem, ChoiceListItemProps, ChoiceListProps } from './choice-list.js';
 export { OptionTile, OptionTileGrid, OptionTileGridProps, OptionTileItem, OptionTileProps } from './option-tile.js';
 export { SelectableCard, SelectableCardProps } from './selectable-card.js';
 export { ChoicePreviewCard, ChoicePreviewCardProps } from './choice-preview-card.js';
@@ -55,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';
@@ -64,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';
@@ -76,7 +78,8 @@ export { Switch, SwitchProps } from './switch.js';
 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 { Avatar, AvatarGroup, AvatarGroupProps, AvatarGroupSize, AvatarProps, AvatarSize, AvatarType, AvatarVariant, initials } from './avatar.js';
+export { Heading, HeadingElement, HeadingLevel, HeadingMark, HeadingMarkProps, HeadingProps, HeadingTone } from './heading.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';
@@ -89,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/index.js

@@ -45,6 +45,7 @@ import { Empty } from "./empty.js";
 import { InsightCard } from "./insight-card.js";
 import { SectionCard } from "./section-card.js";
 import { SectionHeader } from "./section-header.js";
+import { Stepper } from "./stepper.js";
 import { FloatingStepper } from "./floating-stepper.js";
 import { Stat } from "./stat.js";
 import { SummaryBar } from "./summary-bar.js";
@@ -54,6 +55,7 @@ import { ChipInput } from "./chip-input.js";
 import { CopyField } from "./copy-field.js";
 import { QRDisplay } from "./qr-display.js";
 import { ChoiceCard, ChoiceCardGroup } from "./choice-card.js";
+import { ChoiceList, ChoiceListItem } from "./choice-list.js";
 import { OptionTile, OptionTileGrid } from "./option-tile.js";
 import { SelectableCard } from "./selectable-card.js";
 import { ChoicePreviewCard } from "./choice-preview-card.js";
@@ -83,6 +85,7 @@ import { Switch } from "./switch.js";
 import { Tooltip } from "./tooltip.js";
 import { Toaster, ToastView, toast, useToast, toastClassName } from "./toast.js";
 import { Separator } from "./separator.js";
+import { Heading, HeadingMark } from "./heading.js";
 import { Avatar, AvatarGroup, initials } from "./avatar.js";
 import { IconButton } from "./icon-button.js";
 import { ButtonGroup } from "./button-group.js";
@@ -161,6 +164,8 @@ export {
   ChoiceCard,
   ChoiceCardGroup,
   ChoiceCarousel,
+  ChoiceList,
+  ChoiceListItem,
   ChoicePreviewCard,
   ColorInput,
   Combobox,
@@ -205,6 +210,8 @@ export {
   GoogleButton,
   GoogleConsent,
   GoogleSignIn,
+  Heading,
+  HeadingMark,
   HoverCard,
   IconButton,
   Input,
@@ -267,6 +274,7 @@ export {
   Stat,
   Status,
   StepProgress,
+  Stepper,
   SummaryBar,
   Switch,
   Table,

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/icons.d.ts

@@ -12,6 +12,8 @@ declare function CheckIcon(): react.JSX.Element;
 declare function MinusIcon(): react.JSX.Element;
 /** A chevron pointing down: opens a list. */
 declare function ChevronDownIcon(): react.JSX.Element;
+/** A chevron pointing up: opens a panel that comes up from below (the SavingBar's details). */
+declare function ChevronUpIcon(): react.JSX.Element;
 /** An open eye: shows what is hidden (a password). */
 declare function EyeIcon(): react.JSX.Element;
 /** A crossed eye: hides again what was shown. */
@@ -104,5 +106,13 @@ declare function CopyIcon(): react.JSX.Element;
 declare function PencilIcon(): react.JSX.Element;
 /** Three sliders: the filters of a list. */
 declare function SlidersIcon(): react.JSX.Element;
+/** A square: the 1:1 crop. */
+declare function SquareIcon(): react.JSX.Element;
+/** A standing rectangle: a portrait crop (4:5). */
+declare function RectangleVerticalIcon(): react.JSX.Element;
+/** A lying rectangle: a landscape crop (16:9). */
+declare function RectangleHorizontalIcon(): react.JSX.Element;
+/** A dashed square: a free crop, no fixed aspect. */
+declare function SquareDashedIcon(): react.JSX.Element;
 
-export { AlertIcon, ArrowDownIcon, ArrowLeftIcon, ArrowUpDownIcon, ArrowUpIcon, BadgeCheckIcon, BuildingIcon, CalendarIcon, CameraIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleCheckIcon, ClockIcon, CloseIcon, CopyIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, ImageIcon, ImageOffIcon, ImagePlusIcon, InfoIcon, LockIcon, MapPinIcon, MegaphoneIcon, MenuIcon, MicIcon, MinusIcon, MoreVerticalIcon, PaperclipIcon, PencilIcon, PhoneIcon, PlusIcon, QuoteIcon, ReplyIcon, RotateCcwIcon, SearchIcon, SearchXIcon, SlidersIcon, SmileIcon, SparklesIcon, StarFilledIcon, StarIcon, TableIcon, ThumbsUpIcon, TriangleAlertIcon, UploadIcon, UserIcon };
+export { AlertIcon, ArrowDownIcon, ArrowLeftIcon, ArrowUpDownIcon, ArrowUpIcon, BadgeCheckIcon, BuildingIcon, CalendarIcon, CameraIcon, CheckCheckIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, ClockIcon, CloseIcon, CopyIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileTextIcon, ImageIcon, ImageOffIcon, ImagePlusIcon, InfoIcon, LockIcon, MapPinIcon, MegaphoneIcon, MenuIcon, MicIcon, MinusIcon, MoreVerticalIcon, PaperclipIcon, PencilIcon, PhoneIcon, PlusIcon, QuoteIcon, RectangleHorizontalIcon, RectangleVerticalIcon, ReplyIcon, RotateCcwIcon, SearchIcon, SearchXIcon, SlidersIcon, SmileIcon, SparklesIcon, SquareDashedIcon, SquareIcon, StarFilledIcon, StarIcon, TableIcon, ThumbsUpIcon, TriangleAlertIcon, UploadIcon, UserIcon };

package/dist/components/internal/icons.js

@@ -21,6 +21,9 @@ function MinusIcon() {
 function ChevronDownIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
 }
+function ChevronUpIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
+}
 function EyeIcon() {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
@@ -260,6 +263,18 @@ function PencilIcon() {
 function SlidersIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4" }) });
 }
+function SquareIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }) });
+}
+function RectangleVerticalIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("rect", { width: "12", height: "20", x: "6", y: "2", rx: "2" }) });
+}
+function RectangleHorizontalIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("rect", { width: "20", height: "12", x: "2", y: "6", rx: "2" }) });
+}
+function SquareDashedIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M5 3a2 2 0 0 0-2 2M19 3a2 2 0 0 1 2 2M21 19a2 2 0 0 1-2 2M5 21a2 2 0 0 1-2-2M9 3h1M9 21h1M14 3h1M14 21h1M3 9v1M21 9v1M3 14v1M21 14v1" }) });
+}
 export {
   AlertIcon,
   ArrowDownIcon,
@@ -275,6 +290,7 @@ export {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
   CircleCheckIcon,
   ClockIcon,
   CloseIcon,
@@ -299,6 +315,8 @@ export {
   PhoneIcon,
   PlusIcon,
   QuoteIcon,
+  RectangleHorizontalIcon,
+  RectangleVerticalIcon,
   ReplyIcon,
   RotateCcwIcon,
   SearchIcon,
@@ -306,6 +324,8 @@ export {
   SlidersIcon,
   SmileIcon,
   SparklesIcon,
+  SquareDashedIcon,
+  SquareIcon,
   StarFilledIcon,
   StarIcon,
   TableIcon,

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/modal.js

@@ -4,6 +4,7 @@ import {
   __spreadValues
 } from "../../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Button } from "../button.js";
 import { IconButton } from "../icon-button.js";
@@ -32,6 +33,7 @@ function ModalShell({
   container,
   className
 }) {
+  const opener = useRef(null);
   const cancel = /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "outline", children: cancelLabel }) }, "cancel");
   const confirm = /* @__PURE__ */ jsx(Button, { onClick: onConfirm, children: confirmLabel }, "confirm");
   const actions = footer != null ? footer : confirmLabel ? stackedFooter ? [confirm, cancel] : [cancel, confirm] : null;
@@ -51,6 +53,7 @@ function ModalShell({
           className: ["rds-modal", prefix, ...modifiers, className].filter(Boolean).join(" "),
           style: boxStyle,
           onOpenAutoFocus: (event) => {
+            opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
             const box = event.currentTarget;
             const first = box.querySelector(
               '.rds-modal__body :is(input, textarea, select, button, a[href], [tabindex]:not([tabindex="-1"])):not(:disabled)'
@@ -59,6 +62,12 @@ function ModalShell({
               event.preventDefault();
               first.focus();
             }
+          },
+          onCloseAutoFocus: (event) => {
+            var _a;
+            if (trigger || !((_a = opener.current) == null ? void 0 : _a.isConnected)) return;
+            event.preventDefault();
+            opener.current.focus();
           }
         }, description ? {} : { "aria-describedby": void 0 }), {
           children: [

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/number-input.d.ts

@@ -53,7 +53,7 @@ interface NumberInputProps extends Omit<FieldTextProps, 'labelPosition'> {
  * booking, instalments). The number in the middle is typed; the field is a spinbutton, so the arrows move it (Page
  * Up/Down by ten steps, Home/End to the limits) and − and + stay out of the Tab order. At a limit its button turns
  * off. A price, a CPF or a CEP is the Input; a continuous range, the Slider; the steps of a flow, the
- * FloatingStepper. Styles: number-input.css and internal/field.css.
+ * Stepper. Styles: number-input.css and internal/field.css.
  */
 declare function NumberInput({ label, hint, error, errorMessage, required, value, defaultValue, onChange, min, max, step, unit, steps, stepsLabel, debounce, decrementLabel, incrementLabel, name, placeholder, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: NumberInputProps): react.JSX.Element;
 

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;

package/dist/components/row-actions.js

@@ -13,10 +13,14 @@ function RowActions({
   items = [],
   dangerSeparator
 }) {
-  const hasDanger = items.some((i) => i.variant === "danger");
+  const isDanger = (i) => {
+    var _a;
+    return ((_a = i.tone) != null ? _a : i.variant) === "danger";
+  };
+  const hasDanger = items.some(isDanger);
   const showSep = dangerSeparator != null ? dangerSeparator : hasDanger;
-  const normalItems = showSep ? items.filter((i) => i.variant !== "danger") : items;
-  const dangerItems = showSep ? items.filter((i) => i.variant === "danger") : [];
+  const normalItems = showSep ? items.filter((i) => !isDanger(i)) : items;
+  const dangerItems = showSep ? items.filter(isDanger) : [];
   return /* @__PURE__ */ jsxs("div", { className: "rds-row-actions", children: [
     primaryHref ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", tone: "neutral", children: /* @__PURE__ */ jsx("a", { href: primaryHref, onClick: (e) => e.stopPropagation(), children: primaryLabel }) }) : primaryOnClick ? /* @__PURE__ */ jsx(
       Button,
@@ -48,7 +52,7 @@ function RowActions({
             DropdownMenuItem,
             {
               icon: item.icon,
-              tone: item.variant,
+              tone: isDanger(item) ? "danger" : "neutral",
               disabled: item.disabled,
               onSelect: item.onClick,
               children: item.label

package/dist/components/saving-bar.d.ts

@@ -21,13 +21,25 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
     saveLabel?: string;
     retryLabel?: string;
     discardLabel?: string;
+    /**
+     * Turns the unsaved message into a button that opens what is missing (a Drawer with the checklist), in the
+     * compact arrangement only; expanded, the message stays text (Figma: `showDetails`).
+     */
+    onDetails?: () => void;
+    /** Said after the message in the details button's accessible name, hidden on screen. */
+    detailsLabel?: string;
+    /** Whether the panel the details button opens is open (aria-expanded). */
+    detailsExpanded?: boolean;
+    /** The id of that panel (aria-controls). */
+    detailsControls?: string;
 }
 /**
  * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not
- * saved, and leaves once saved. Painted with colors/primary on purpose: a state that waits for a
- * decision, not a notice. It does not place itself: put it sticky or fixed at the bottom.
- * Its Buttons use the inverse tone, drawn for the colors/primary band in both modes. Styles: saving-bar.css.
+ * saved, and leaves once saved. It is the brand plate on purpose (.ds-plate on the bar, in every brand and in
+ * light or dark alike): a state that waits for a decision, not a notice. It does not place itself: put it
+ * sticky or fixed at the bottom. Its Buttons are Salvar in tone action and Descartar in tone neutral ghost, read
+ * inside the plate. Styles: saving-bar.css.
  */
-declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, className, ...rest }: SavingBarProps): react.JSX.Element;
+declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
 
 export { SavingBar, type SavingBarProps, type SavingBarStatus };

package/dist/components/saving-bar.js

@@ -7,7 +7,7 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "./button.js";
 import { Loader } from "./internal/button.js";
-import { AlertIcon } from "./internal/icons.js";
+import { AlertIcon, ChevronUpIcon } from "./internal/icons.js";
 function SavingBar(_a) {
   var _b = _a, {
     status = "unsaved",
@@ -19,6 +19,10 @@ function SavingBar(_a) {
     saveLabel = "Salvar",
     retryLabel = "Tentar de novo",
     discardLabel = "Descartar",
+    onDetails,
+    detailsLabel = "Ver o que falta",
+    detailsExpanded,
+    detailsControls,
     className
   } = _b, rest = __objRest(_b, [
     "status",
@@ -30,28 +34,52 @@ function SavingBar(_a) {
     "saveLabel",
     "retryLabel",
     "discardLabel",
+    "onDetails",
+    "detailsLabel",
+    "detailsExpanded",
+    "detailsControls",
     "className"
   ]);
   const saving = status === "saving";
   const error = status === "error";
-  return /* @__PURE__ */ jsxs(
+  const text = saving ? savingMessage : error ? errorMessage : message;
+  const details = status === "unsaved" && onDetails !== void 0;
+  return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
-      className: ["rds-savingbar", className].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ jsxs("p", { className: "rds-savingbar__message", role: "status", children: [
+      className: ["rds-savingbar", "ds-plate", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
+        /* @__PURE__ */ jsxs("p", { className: ["rds-savingbar__message", details && "rds-savingbar__message--details"].filter(Boolean).join(" "), role: "status", children: [
           saving && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon rds-savingbar__loader", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader, {}) }),
           error && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertIcon, {}) }),
-          /* @__PURE__ */ jsx("span", { children: saving ? savingMessage : error ? errorMessage : message })
+          /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: text }),
+          details && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "rds-savingbar__details",
+              "aria-expanded": detailsExpanded != null ? detailsExpanded : false,
+              "aria-controls": detailsControls,
+              onClick: onDetails,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "rds-savingbar__text", children: text }),
+                /* @__PURE__ */ jsxs("span", { className: "rds-visually-hidden", children: [
+                  ", ",
+                  detailsLabel
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
-          onDiscard && /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
-          /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
+          onDiscard && /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
+          /* @__PURE__ */ jsx(Button, { tone: "action", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
         ] })
-      ]
+      ] })
     })
   );
 }

package/dist/components/section-header.d.ts

@@ -6,12 +6,13 @@ import { ReactNode } from 'react';
  * title, kept because SettingsList composes it and the products still use it. New code uses
  * `<PageHeader titleAs="h2" title description actions />`.
  *
- * action → actions. eyebrow and number (not in the Figma) still render as a line above the title. Styles: section-header.css.
+ * action → actions. eyebrow and number are deprecated (not in the Figma); they still render as a line above the
+ * title. Styles: section-header.css.
  */
 interface SectionHeaderProps {
-    /** Small uppercase line above the title (overline). */
+    /** @deprecated Not in the Figma [RDS] (the SectionHeader pattern): a small uppercase line above the title. */
     eyebrow?: string;
-    /** Section or step number, before the eyebrow: "02 · CONTEÚDO". */
+    /** @deprecated Not in the Figma [RDS]: the section or step number, before the eyebrow ("02 · CONTEÚDO"). */
     number?: string;
     title: string;
     description?: string;