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

package/dist/components/image-crop-modal.js

@@ -1,254 +1,7 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import ReactCrop, { centerCrop } from "react-image-crop";
-import "react-image-crop/dist/ReactCrop.css";
-import { Alert } from "./alert.js";
-import { Button } from "./button.js";
-import { Dialog } from "./dialog.js";
-import { Spinner } from "./spinner.js";
-import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
-function RatioIcon({ w, h }) {
-  const box = 16;
-  const rw = w >= h ? box : w / h * box;
-  const rh = h >= w ? box : h / w * box;
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("rect", { x: (18 - rw) / 2, y: (18 - rh) / 2, width: rw, height: rh, rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }) });
-}
-function FreeIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("rect", { x: "2.5", y: "2.5", width: "13", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6", strokeDasharray: "2.5 2.2" }) });
-}
-const DEFAULT_PRESETS = [
-  { id: "square", label: "1:1", aspect: 1, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 1, h: 1 }) },
-  { id: "portrait", label: "4:5", aspect: 4 / 5, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 4, h: 5 }) },
-  { id: "landscape", label: "16:9", aspect: 16 / 9, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 16, h: 9 }) },
-  { id: "free", label: "Livre", icon: /* @__PURE__ */ jsx(FreeIcon, {}) }
-];
-const DEFAULT_MIN_ASPECT = 0.5;
-const DEFAULT_MAX_ASPECT = 2;
-function buildInitialCrop(width, height, aspect) {
-  if (!aspect) {
-    return { unit: "%", x: 0, y: 0, width: 100, height: 100 };
-  }
-  const imageAspect = width / height;
-  let cropW;
-  let cropH;
-  if (aspect >= imageAspect) {
-    cropW = 100;
-    cropH = imageAspect / aspect * 100;
-  } else {
-    cropH = 100;
-    cropW = aspect / imageAspect * 100;
-  }
-  return centerCrop({ unit: "%", x: 0, y: 0, width: cropW, height: cropH }, width, height);
-}
-const QUALITY_STEPS = [0.85, 0.75, 0.65, 0.55];
-const MAX_SIDE_STEPS = [1600, 1200];
-function canvasToBlob(canvas, mimeType, quality) {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error("toBlob failed")), mimeType, quality);
-  });
-}
-function drawCrop(image, crop, maxSide) {
-  const canvas = document.createElement("canvas");
-  const scaleX = image.naturalWidth / image.width;
-  const scaleY = image.naturalHeight / image.height;
-  let outW = Math.round(crop.width * scaleX);
-  let outH = Math.round(crop.height * scaleY);
-  if (maxSide && Math.max(outW, outH) > maxSide) {
-    const ratio = maxSide / Math.max(outW, outH);
-    outW = Math.round(outW * ratio);
-    outH = Math.round(outH * ratio);
-  }
-  canvas.width = outW;
-  canvas.height = outH;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("Canvas not supported");
-  ctx.drawImage(
-    image,
-    crop.x * scaleX,
-    crop.y * scaleY,
-    crop.width * scaleX,
-    crop.height * scaleY,
-    0,
-    0,
-    outW,
-    outH
-  );
-  return canvas;
-}
-async function cropToBlob(image, crop, mimeType, maxSizeBytes) {
-  const baseCanvas = drawCrop(image, crop);
-  if (!maxSizeBytes) {
-    return canvasToBlob(baseCanvas, mimeType, 0.92);
-  }
-  const out = await canvasToBlob(baseCanvas, "image/jpeg", 0.92);
-  if (out.size <= maxSizeBytes) return out;
-  let best = out;
-  for (const q of QUALITY_STEPS) {
-    const candidate = await canvasToBlob(baseCanvas, "image/jpeg", q);
-    best = candidate;
-    if (candidate.size <= maxSizeBytes) return candidate;
-  }
-  for (const side of MAX_SIDE_STEPS) {
-    const scaledCanvas = drawCrop(image, crop, side);
-    for (const q of QUALITY_STEPS) {
-      const candidate = await canvasToBlob(scaledCanvas, "image/jpeg", q);
-      best = candidate;
-      if (candidate.size <= maxSizeBytes) return candidate;
-    }
-  }
-  return best;
-}
-function ImageCropModal({
-  open,
-  file,
-  position,
-  onCancel,
-  onConfirm,
-  presets = DEFAULT_PRESETS,
-  minAspect = DEFAULT_MIN_ASPECT,
-  maxAspect = DEFAULT_MAX_ASPECT,
-  title = "Ajustar foto",
-  confirmLabel = "Aplicar e enviar",
-  maxSizeBytes
-}) {
-  const [src, setSrc] = useState(null);
-  const [preset, setPreset] = useState(presets[0]);
-  const [crop, setCrop] = useState();
-  const [completedCrop, setCompletedCrop] = useState(null);
-  const [aspectError, setAspectError] = useState(null);
-  const [busy, setBusy] = useState(false);
-  const [imgLoaded, setImgLoaded] = useState(false);
-  const imgRef = useRef(null);
-  useEffect(() => {
-    if (!file) {
-      setSrc(null);
-      setImgLoaded(false);
-      return;
-    }
-    const url = URL.createObjectURL(file);
-    setSrc(url);
-    setPreset(presets[0]);
-    setCrop(void 0);
-    setCompletedCrop(null);
-    setAspectError(null);
-    setImgLoaded(false);
-    return () => URL.revokeObjectURL(url);
-  }, [file, presets]);
-  function handleImageLoad(e) {
-    var _a, _b, _c, _d;
-    const { width, height } = e.currentTarget;
-    const initial = buildInitialCrop(width, height, preset.aspect);
-    setCrop(initial);
-    const pixelInitial = {
-      unit: "px",
-      x: ((_a = initial.x) != null ? _a : 0) / 100 * width,
-      y: ((_b = initial.y) != null ? _b : 0) / 100 * height,
-      width: ((_c = initial.width) != null ? _c : 0) / 100 * width,
-      height: ((_d = initial.height) != null ? _d : 0) / 100 * height
-    };
-    setCompletedCrop(pixelInitial);
-    setImgLoaded(true);
-  }
-  function applyPreset(p) {
-    setPreset(p);
-    setAspectError(null);
-    if (imgRef.current) {
-      const { width, height } = imgRef.current;
-      setCrop(buildInitialCrop(width, height, p.aspect));
-    }
-  }
-  function validateFreeAspect(c) {
-    if (preset.aspect) return true;
-    if (!c.width || !c.height) return false;
-    const ratio = c.width / c.height;
-    if (ratio < minAspect) {
-      setAspectError(`Recorte muito alto. M\xEDnimo permitido: ${minAspect.toFixed(1)}.`);
-      return false;
-    }
-    if (ratio > maxAspect) {
-      setAspectError(`Recorte muito largo. M\xE1ximo permitido: ${maxAspect.toFixed(1)}.`);
-      return false;
-    }
-    setAspectError(null);
-    return true;
-  }
-  async function handleConfirm() {
-    if (busy) return;
-    if (!completedCrop || !imgRef.current || !file) return;
-    if (!validateFreeAspect(completedCrop)) return;
-    setBusy(true);
-    try {
-      const blob = await cropToBlob(imgRef.current, completedCrop, file.type || "image/jpeg", maxSizeBytes);
-      await onConfirm(blob);
-    } catch (err) {
-      console.error("cropToBlob error", err);
-    } finally {
-      setBusy(false);
-    }
-  }
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      onOpenChange: (next) => {
-        if (!next) onCancel();
-      },
-      size: "lg",
-      title: position ? `${title} \xB7 ${position}` : title,
-      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", onClick: onCancel, children: "Cancelar" }),
-        /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, disabled: busy || !completedCrop || !!aspectError, loading: busy, children: busy ? "Aplicando\u2026" : confirmLabel })
-      ] }),
-      children: /* @__PURE__ */ jsxs("div", { className: "rds-image-crop", children: [
-        presets.length > 1 && /* @__PURE__ */ jsx(
-          ToggleGroup,
-          {
-            type: "single",
-            "aria-label": "Propor\xE7\xE3o",
-            value: preset.id,
-            onValueChange: (id) => {
-              const next = presets.find((p) => p.id === id);
-              if (next) applyPreset(next);
-            },
-            className: "rds-image-crop__presets",
-            children: presets.map((p) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: p.id, icon: p.icon, children: p.label }, p.id))
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "rds-image-crop__stage", children: [
-          src && /* @__PURE__ */ jsx(
-            ReactCrop,
-            {
-              crop,
-              onChange: (_, percentCrop) => setCrop(percentCrop),
-              onComplete: (c) => {
-                setCompletedCrop(c);
-                validateFreeAspect(c);
-              },
-              aspect: preset.aspect,
-              keepSelection: true,
-              minWidth: 50,
-              minHeight: 50,
-              className: "rds-image-crop__crop",
-              children: /* @__PURE__ */ jsx("img", { ref: imgRef, src, alt: "", onLoad: handleImageLoad, className: "rds-image-crop__image" })
-            }
-          ),
-          !imgLoaded && /* @__PURE__ */ jsx("div", { className: "rds-image-crop__layer", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: "Carregando imagem\u2026" }) }),
-          busy && /* @__PURE__ */ jsx("div", { className: "rds-image-crop__layer rds-image-crop__layer--busy", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", tone: "inverse", label: "Enviando\u2026" }) })
-        ] }),
-        aspectError && /* @__PURE__ */ jsx(Alert, { tone: "danger", title: aspectError, announce: "alert" }),
-        !aspectError && preset.id === "free" && /* @__PURE__ */ jsxs("p", { className: "rds-image-crop__hint", children: [
-          "Livre: propor\xE7\xE3o entre ",
-          minAspect.toFixed(1),
-          " (vertical) e ",
-          maxAspect.toFixed(1),
-          " (horizontal)."
-        ] })
-      ] })
-    }
-  );
-}
+import { ImageCropDialog } from "./image-crop-dialog.js";
+const ImageCropModal = ImageCropDialog;
 export {
   ImageCropModal
 };

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

@@ -1,13 +1,12 @@
 import * as react from 'react';
-import { CropPreset } from './image-crop-modal.js';
+import { CropPreset } from './image-crop-dialog.js';
 
 /**
- * @deprecated Use `<FileInput variant="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 the 1.x API compiling and
- * keeps the upload (`onUpload`) and the crop (`crop`). Every variant renders the tile: an image asks for a 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.
  */
-type ImageUploadAspect = 'logo' | 'banner' | 'square';
-type ImageUploadVariant = 'button' | 'dropzone' | 'tile';
 interface ImageUploadLabels {
     /** The empty tile's text (FileInput's `tileText`). */
     select: string;
@@ -26,7 +25,7 @@ interface ImageUploadLabels {
     /** The error message when the upload fails without one. */
     error: string;
 }
-/** When given, the chosen image goes through the ImageCropModal before the upload. */
+/** When given, the chosen image goes through the ImageCropDialog before the upload. */
 interface ImageUploadCrop {
     presets?: CropPreset[];
     minAspect?: number;
@@ -36,10 +35,6 @@ interface ImageUploadCrop {
     confirmLabel?: string;
 }
 interface ImageUploadProps {
-    /** @deprecated Ignored: the tile's preview fills the square. */
-    previewClassName?: string;
-    /** @deprecated Ignored. */
-    previewWrapperClassName?: string;
     /** The form field name: a hidden input carries the image's URL. */
     name: string;
     /** The image's URL, '' for none. */
@@ -49,16 +44,12 @@ interface ImageUploadProps {
     onUpload: (file: File) => Promise<string>;
     label?: string;
     hint?: string;
-    /** @deprecated Ignored: the tile is a 112 square. */
-    aspect?: ImageUploadAspect;
     accept?: string;
     className?: string;
-    /** @deprecated Ignored: every variant is the tile. */
-    variant?: ImageUploadVariant;
     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 ImageUploadAspect, type ImageUploadCrop, type ImageUploadLabels, type ImageUploadProps, type ImageUploadVariant };
+export { ImageUpload, type ImageUploadCrop, type ImageUploadLabels, type ImageUploadProps };

package/dist/components/image-upload.js

@@ -5,7 +5,7 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { FileInput } from "./file-input.js";
-import { ImageCropModal } from "./image-crop-modal.js";
+import { ImageCropDialog } from "./image-crop-dialog.js";
 const DEFAULT_LABELS = {
   select: "Selecionar imagem",
   change: "Trocar imagem",
@@ -63,7 +63,7 @@ function ImageUpload({
       FileInput,
       {
         ref: input,
-        variant: "tile",
+        layout: "tile",
         label,
         "aria-label": label ? void 0 : L.aria,
         hint,
@@ -81,7 +81,7 @@ function ImageUpload({
     ),
     /* @__PURE__ */ jsx("input", { type: "hidden", name, value }),
     crop && /* @__PURE__ */ jsx(
-      ImageCropModal,
+      ImageCropDialog,
       {
         open: !!pendingFile,
         file: pendingFile,

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". */