@rojaostudio/ds 2.0.0-next.11 → 2.0.0-next.13

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.
+ * 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`. */
 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",
@@ -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

@@ -38,10 +38,11 @@ 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';

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";
@@ -273,6 +274,7 @@ export {
   Stat,
   Status,
   StepProgress,
+  Stepper,
   SummaryBar,
   Switch,
   Table,

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 };

package/dist/components/internal/icons.js

@@ -260,6 +260,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,
@@ -299,6 +311,8 @@ export {
   PhoneIcon,
   PlusIcon,
   QuoteIcon,
+  RectangleHorizontalIcon,
+  RectangleVerticalIcon,
   ReplyIcon,
   RotateCcwIcon,
   SearchIcon,
@@ -306,6 +320,8 @@ export {
   SlidersIcon,
   SmileIcon,
   SparklesIcon,
+  SquareDashedIcon,
+  SquareIcon,
   StarFilledIcon,
   StarIcon,
   TableIcon,

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/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;

package/dist/components/selectable-card.d.ts

@@ -5,22 +5,14 @@ import { ReactNode } from 'react';
 interface SelectableCardProps {
     selected?: boolean;
     onClick?: () => void;
-    /** Ignored: the card is a radio now, never a link. */
-    as?: 'button' | 'a';
-    /** Ignored: the card is a radio now, never a link. */
-    href?: string;
-    /** Ignored: the ChoiceCard row always shows its radio. */
-    indicator?: 'radio' | 'check' | 'chevron' | 'none';
-    /** Ignored: the ChoiceCard has no ribbon. */
-    ribbon?: ReactNode;
     disabled?: boolean;
     className?: string;
     children: ReactNode;
 }
 /**
  * @deprecated Use ChoiceCard (Figma [RDS] Content/ChoiceCard, layout="row"). A thin wrapper over it: `children`
- * is the label, `onClick` is `onSelect`. It is a native radio now, not a button: `as`, `href`, `indicator` and
- * `ribbon` are ignored, and a chosen card cannot be un-chosen by clicking it again.
+ * is the label, `onClick` is `onSelect`. It is a native radio now, not a button (`as`, `href`, `indicator` and
+ * `ribbon` left in 2.0), and a chosen card cannot be un-chosen by clicking it again.
  */
 declare function SelectableCard({ selected, onClick, disabled, className, children }: SelectableCardProps): react.JSX.Element;
 

package/dist/components/stepper.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Stepper — a composition of the Card (as a pill) and Buttons (Figma [RDS] Actions/Button, neutral): the
+ * floating steps of a flow (point of sale, checkout). The current step is the filled Button (aria-current="step");
+ * earlier steps go back, later ones are disabled; `canNavigate` changes the rule. `action` is a last Button after
+ * a vertical Separator (Reset). Where it floats is the caller's (className or a wrapper). Styles: stepper.css.
+ */
+type StepperStep = {
+    key: string;
+    label: string;
+};
+interface StepperProps {
+    steps: StepperStep[];
+    /** key da etapa atual */
+    current: string;
+    onNavigate?: (key: string) => void;
+    /** Regra de navegação por etapa. Default: só etapas anteriores à atual. */
+    canNavigate?: (key: string, index: number, currentIndex: number) => boolean;
+    /** Ação à direita, separada por divisor (ex.: Reset). */
+    action?: {
+        label: string;
+        icon?: ReactNode;
+        onClick: () => void;
+    };
+    className?: string;
+    /** The navigation's name. Default "Etapas". */
+    'aria-label'?: string;
+}
+declare function Stepper({ steps, current, onNavigate, canNavigate, action, className, 'aria-label': ariaLabel }: StepperProps): react.JSX.Element;
+
+export { Stepper, type StepperProps, type StepperStep };

package/dist/components/stepper.js

@@ -0,0 +1,36 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { Card } from "./card.js";
+import { Separator } from "./separator.js";
+function Stepper({ steps, current, onNavigate, canNavigate, action, className, "aria-label": ariaLabel = "Etapas" }) {
+  const currentIdx = steps.findIndex((s) => s.key === current);
+  return /* @__PURE__ */ jsxs(Card, { as: "div", size: "sm", role: "navigation", "aria-label": ariaLabel, className: ["rds-stepper", className].filter(Boolean).join(" "), children: [
+    steps.map((s, idx) => {
+      const isCurrent = idx === currentIdx;
+      const canGo = canNavigate ? canNavigate(s.key, idx, currentIdx) : idx < currentIdx;
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          tone: "neutral",
+          variant: isCurrent ? "fill" : "ghost",
+          disabled: !canGo && !isCurrent,
+          "aria-current": isCurrent ? "step" : void 0,
+          onClick: () => {
+            if (canGo && !isCurrent) onNavigate == null ? void 0 : onNavigate(s.key);
+          },
+          children: s.label
+        },
+        s.key
+      );
+    }),
+    action && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "rds-stepper__divider" }),
+      /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", icon: action.icon, onClick: action.onClick, children: action.label })
+    ] })
+  ] });
+}
+export {
+  Stepper
+};

package/dist/components/toast.d.ts

@@ -14,12 +14,18 @@ interface ToastOptions {
     variant?: ToastVariant;
     /** The tone's icon (Figma: `showIcon`). Decorative. */
     showIcon?: boolean;
-    /** One action (Figma: `showAction`): "Desfazer", "Ver". With an action it stays at least 6 s. */
+    /**
+     * One action (Figma: `showAction`): "Desfazer", "Ver". A toast with an action does not close by itself (WCAG 2.2.1,
+     * Timing Adjustable): it stays until the person uses the action or the ×. Choosing the action also closes it.
+     */
     action?: {
         label: string;
         onClick: () => void;
     };
-    /** ms on screen. Default 5 s, 6 s with an action. It pauses while the mouse or the focus is on it. */
+    /**
+     * ms on screen. Default 5 s; `Infinity` (until closed) with an action. It pauses while the mouse or the focus is on
+     * it. A number given here wins, also with an action: give one only when the action can be reached some other way.
+     */
     duration?: number;
     /** Give the same id to replace a toast that is on screen instead of stacking another one. */
     id?: string;
@@ -50,14 +56,19 @@ declare function useToast(): ToastFn;
 interface ToasterProps {
     /** The region's name, said with the F8 shortcut that takes the focus to it. */
     label?: string;
+    /** The ×'s accessible name (and its Tooltip), on every toast. Default "Fechar". */
+    closeLabel?: string;
     /** The app, when the Toaster wraps it. It can also be mounted alone, once, anywhere on the page. */
     children?: ReactNode;
 }
+/** @internal How long a toast stays: 5 s, or until closed when it has an action (WCAG 2.2.1). */
+declare const toastDuration: (duration: number | undefined, hasAction: boolean) => number;
 /**
  * Toaster — the region where the toasts of the Figma [RDS] Feedback/Toast appear (Radix Toast): the bottom-right
  * corner, up to three at a time (a fourth pushes the oldest out), each one announced in a live region (danger
- * assertively, the others politely). F8 takes the focus to the region; swiping right dismisses. Styles: toast.css.
+ * assertively, the others politely). F8 takes the focus to the region; swiping right dismisses. A toast closes by
+ * itself after 5 s; one with an action stays until the action or the × (WCAG 2.2.1). Styles: toast.css.
  */
-declare function Toaster({ label, children }: ToasterProps): react.JSX.Element;
+declare function Toaster({ label, closeLabel, children }: ToasterProps): react.JSX.Element;
 
-export { type ToastFn, type ToastOptions, type ToastTone, type ToastVariant, ToastView, type ToastViewProps, Toaster, type ToasterProps, toast, toastClassName, useToast };
+export { type ToastFn, type ToastOptions, type ToastTone, type ToastVariant, ToastView, type ToastViewProps, Toaster, type ToasterProps, toast, toastClassName, toastDuration, useToast };

package/dist/components/toast.js

@@ -66,7 +66,8 @@ function useToast() {
   return toast;
 }
 const MAX_VISIBLE = 3;
-function Toaster({ label = "Notifica\xE7\xF5es", children }) {
+const toastDuration = (duration, hasAction) => duration != null ? duration : hasAction ? Infinity : 5e3;
+function Toaster({ label = "Notifica\xE7\xF5es", closeLabel = "Fechar", children }) {
   const [items, setItems] = useState([]);
   useEffect(() => {
     const listener = (event) => {
@@ -102,7 +103,7 @@ function Toaster({ label = "Notifica\xE7\xF5es", children }) {
           if (!next) close(key);
         },
         type: tone === "danger" ? "foreground" : "background",
-        duration: duration != null ? duration : action ? 6e3 : 5e3,
+        duration: toastDuration(duration, Boolean(action)),
         className: toastClassName(tone, variant),
         children: [
           /* @__PURE__ */ jsx(
@@ -115,7 +116,7 @@ function Toaster({ label = "Notifica\xE7\xF5es", children }) {
             }
           ),
           action && /* @__PURE__ */ jsx(ToastPrimitive.Action, { altText: action.label, asChild: true, children: /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", className: "rds-toast__action", onClick: action.onClick, children: action.label }) }),
-          /* @__PURE__ */ jsx(Tooltip, { text: "Fechar", children: /* @__PURE__ */ jsx(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: "Fechar", tone: "neutral", variant: "ghost", className: "rds-toast__close" }) }) })
+          /* @__PURE__ */ jsx(Tooltip, { text: closeLabel, children: /* @__PURE__ */ jsx(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: closeLabel, tone: "neutral", variant: "ghost", className: "rds-toast__close" }) }) })
         ]
       },
       key
@@ -128,5 +129,6 @@ export {
   Toaster,
   toast,
   toastClassName,
+  toastDuration,
   useToast
 };