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

package/dist/components/image-crop-modal.d.ts

@@ -1,59 +1,16 @@
-import * as react from 'react';
+import { ImageCropDialog, ImageCropDialogProps } from './image-crop-dialog.js';
+export { CropPreset } from './image-crop-dialog.js';
+import 'react';
 
 /**
- * ImageCropModal — a composition of the Dialog, a ToggleGroup (the aspect presets), the Alert (an aspect out of
- * bounds) and the Spinner: crops an image before upload. Needs `react-image-crop` (an optional peer, needed only
- * here). Styles: image-crop-modal.css.
- *
- * Uso:
- *   <ImageCropModal
- *     open={open}
- *     file={selectedFile}
- *     onCancel={() => setOpen(false)}
- *     onConfirm={(blob) => uploadCroppedImage(blob)}
- *   />
- *
- * Presets default: Livre (1:2 a 2:1), 1:1, 4:5, 16:9.
- * Customize via prop `presets`.
+ * image-crop-modal — the 1.x and 2.0-next name of the ImageCropDialog, kept so
+ * `@rojaostudio/ds/components/image-crop-modal` and `ImageCropModal` still work in 2.0. The codemod
+ * (`npx @rojaostudio/ds-codemod`) renames both. Like the dialog, it needs the optional peer `react-image-crop`.
  */
-interface CropPreset {
-    id: string;
-    label: string;
-    /** Aspect ratio fixo. undefined = livre (com bounds MIN/MAX_ASPECT). */
-    aspect?: number;
-    /** Ícone opcional exibido antes do rótulo (ajuda quem não decodifica "16:9"). */
-    icon?: React.ReactNode;
-}
-interface ImageCropModalProps {
-    open: boolean;
-    file: File | null;
-    /** Label de contexto pro título (ex: "Foto 2 de 4"). */
-    position?: string;
-    onCancel: () => void;
-    /**
-     * Recebe o blob do recorte. Pode ser assíncrono (ex.: upload) — o modal AGUARDA a promise
-     * e mantém o botão travado/carregando até resolver, evitando duplo-clique que duplicaria a
-     * imagem (o upload roda fora do `busy` se o modal não esperar).
-     */
-    onConfirm: (blob: Blob) => void | Promise<void>;
-    /** Presets disponíveis. default = Livre + 1:1 + 4:5 + 16:9. */
-    presets?: CropPreset[];
-    /** Limite mínimo de aspect ratio (alto-baixo). default = 0.5 (1:2). */
-    minAspect?: number;
-    /** Limite máximo de aspect ratio (largo-baixo). default = 2.0 (2:1). */
-    maxAspect?: number;
-    /** Título do modal. default = "Ajustar foto". */
-    title?: string;
-    /** Label do botão confirmar. default = "Aplicar e enviar". */
-    confirmLabel?: string;
-    /**
-     * Teto de tamanho do blob de saída (bytes). Quando definido, a saída do crop
-     * é forçada a JPEG e comprimida (qualidade + downscale) até caber no limite —
-     * evita que foto de celular grande estoure o limite de upload. Sem ele, a
-     * saída mantém o tipo original e qualidade fixa (comportamento inalterado).
-     */
-    maxSizeBytes?: number;
-}
-declare function ImageCropModal({ open, file, position, onCancel, onConfirm, presets, minAspect, maxAspect, title, confirmLabel, maxSizeBytes, }: ImageCropModalProps): react.JSX.Element;
 
-export { type CropPreset, ImageCropModal, type ImageCropModalProps };
+/** @deprecated Renamed to `ImageCropDialog` (`@rojaostudio/ds/components/image-crop-dialog`) in 2.0. Same props. */
+declare const ImageCropModal: typeof ImageCropDialog;
+/** @deprecated Renamed to `ImageCropDialogProps` in 2.0. */
+type ImageCropModalProps = ImageCropDialogProps;
+
+export { ImageCropModal, type ImageCropModalProps };

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

@@ -4,18 +4,19 @@ export { HoverCard, HoverCardProps } from './hover-card.js';
 export { Dialog, DialogClose, DialogProps, DialogSize } from './dialog.js';
 export { Sheet, SheetClose, SheetProps, SheetSide } from './sheet.js';
 export { Drawer, DrawerClose, DrawerProps } from './drawer.js';
+export { LoadingOverlay, LoadingOverlayProps } from './loading-overlay.js';
 export { DropdownMenu, DropdownMenuAlign, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuItemTone, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSide } from './dropdown-menu.js';
 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 +39,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 +58,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,9 +67,9 @@ 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 { SavingBar, SavingBarPlacement, SavingBarProps, SavingBarStatus } from './saving-bar.js';
 export { SavingBarProvider, SavingBarRegistration, SavingBarRoot, usePageSavingBar } from './saving-bar-context.js';
 export { FAB, FABConfig, FABProps, FABProvider, FABRoot, useFAB, usePageFAB } from './fab.js';
 export { Table, TableAlign, TableBody, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableProps, TableRow, TableSort, TableStatus, TableStatusProps } from './table.js';
@@ -76,11 +79,12 @@ 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';
-export { FormActions, FormActionsLayout, FormActionsProps } from './form-actions.js';
+export { FormActions, FormActionsPlacement, FormActionsProps } from './form-actions.js';
 export { Breadcrumb, BreadcrumbItem, BreadcrumbLinkComponent, BreadcrumbProps, BreadcrumbTone } from './breadcrumb.js';
 export { Pagination, PaginationLinkComponent, PaginationProps, pageItems } from './pagination.js';
 export { Popover, PopoverAlign, PopoverClose, PopoverProps, PopoverSide } from './popover.js';
@@ -89,7 +93,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';
@@ -132,6 +136,7 @@ import '@radix-ui/react-dialog';
 import './internal/modal.js';
 import './internal/menu.js';
 import './internal/fieldset.js';
+import './internal/bottom-bar.js';
 import '@radix-ui/react-toggle';
 import '@radix-ui/react-tooltip';
 import '@radix-ui/react-popover';

package/dist/components/index.js

@@ -5,6 +5,7 @@ import { HoverCard } from "./hover-card.js";
 import { Dialog, DialogClose } from "./dialog.js";
 import { Sheet, SheetClose } from "./sheet.js";
 import { Drawer, DrawerClose } from "./drawer.js";
+import { LoadingOverlay } from "./loading-overlay.js";
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -45,6 +46,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 +56,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 +86,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 +165,8 @@ export {
   ChoiceCard,
   ChoiceCardGroup,
   ChoiceCarousel,
+  ChoiceList,
+  ChoiceListItem,
   ChoicePreviewCard,
   ColorInput,
   Combobox,
@@ -205,6 +211,8 @@ export {
   GoogleButton,
   GoogleConsent,
   GoogleSignIn,
+  Heading,
+  HeadingMark,
   HoverCard,
   IconButton,
   Input,
@@ -216,6 +224,7 @@ export {
   KbdGroup,
   Listbox,
   ListboxOption,
+  LoadingOverlay,
   Marker,
   MediaTile,
   Message,
@@ -267,6 +276,7 @@ export {
   Stat,
   Status,
   StepProgress,
+  Stepper,
   SummaryBar,
   Switch,
   Table,

package/dist/components/internal/bottom-bar.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type BottomBarPlacement = 'docked' | 'floating';
+interface BottomBarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * docked (the container's width, against the foot, square corners) or floating (from lg 1024 up: off the foot by
+     * bottom-bar/floating/margin, at most bottom-bar/floating/max-width, centred, bottom-bar/floating/radius and the
+     * elevation/overlay shadow). Below 1024 floating is exactly docked (Figma: `placement`).
+     */
+    placement?: BottomBarPlacement;
+    /**
+     * The leading slot, on the left: one ~44 control, never running text. Present (even `null` or `false` while its
+     * control is hidden), the slot is there and reserves bottom-bar/leading/min-width, so what follows does not jump
+     * when the control comes and goes; left out (`undefined`), there is no slot. Whoever fills it says its own changes.
+     */
+    leading?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * BottomBar — Figma [RDS] Actions/.bottom-bar, private: the shell at the foot of the screen under the FormActions and
+ * the SavingBar. Not exported from the package. It owns the colour (bottom-bar/background, the brand's primary), the
+ * height (64 plus env(safe-area-inset-bottom) compact, 68 expanded), the padding and gap, the place (sticky at the
+ * bottom of the scrolling container), the placement, the leading slot, the Button tokens in the bar's colours and the
+ * on-screen keyboard (compact: it slides away while a field is being typed in). Whoever builds on it puts the
+ * actions. Styles: bottom-bar.css.
+ */
+declare function BottomBar({ placement, leading, className, children, ...rest }: BottomBarProps): react.JSX.Element;
+
+export { BottomBar, type BottomBarPlacement, type BottomBarProps };

package/dist/components/internal/bottom-bar.js

@@ -0,0 +1,25 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useOnScreenKeyboard } from "./use-on-screen-keyboard.js";
+function BottomBar(_a) {
+  var _b = _a, { placement = "docked", leading, className, children } = _b, rest = __objRest(_b, ["placement", "leading", "className", "children"]);
+  const keyboard = useOnScreenKeyboard();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-bottom-bar", `rds-bottom-bar--${placement}`, keyboard && "rds-bottom-bar--keyboard", className].filter(Boolean).join(" "),
+      children: [
+        leading !== void 0 && /* @__PURE__ */ jsx("div", { className: "rds-bottom-bar__leading", children: leading }),
+        children
+      ]
+    })
+  );
+}
+export {
+  BottomBar
+};

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

@@ -104,5 +104,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, 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 };