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

package/dist/components/choice-carousel.d.ts

@@ -18,7 +18,7 @@ interface ChoiceCarouselProps<T> {
 /**
  * ChoiceCarousel — a horizontal, scroll-snapped row of options to pick one (radiogroup) or several (group of
  * checkboxes); the options are drawn by `renderCard`. On a wide screen two outline IconButtons (with their Tooltips)
- * scroll it by one option; the arrow keys do the same on the row. Styles: choice-carousel.css.
+ * scroll it by one option, each one there only while there is more that way; the arrow keys do the same on the row. Styles: choice-carousel.css.
  */
 declare function ChoiceCarousel<T>({ options, getKey, renderCard, value, onChange, multiple, ariaLabel, isDisabled, }: ChoiceCarouselProps<T>): react.JSX.Element;
 

package/dist/components/choice-carousel.js

@@ -75,7 +75,7 @@ function ChoiceCarousel({
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "rds-choice-carousel", children: [
-    /* @__PURE__ */ jsx(Tooltip, { text: "Anterior", children: /* @__PURE__ */ jsx(
+    canScrollLeft && /* @__PURE__ */ jsx(Tooltip, { text: "Anterior", children: /* @__PURE__ */ jsx(
       IconButton,
       {
         className: "rds-choice-carousel__arrow rds-choice-carousel__arrow--prev",
@@ -84,7 +84,6 @@ function ChoiceCarousel({
         variant: "outline",
         tone: "neutral",
         onClick: () => scrollByAmount(-1),
-        disabled: !canScrollLeft,
         tabIndex: -1
       }
     ) }),
@@ -123,7 +122,7 @@ function ChoiceCarousel({
         })
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { text: "Pr\xF3ximo", children: /* @__PURE__ */ jsx(
+    canScrollRight && /* @__PURE__ */ jsx(Tooltip, { text: "Pr\xF3ximo", children: /* @__PURE__ */ jsx(
       IconButton,
       {
         className: "rds-choice-carousel__arrow rds-choice-carousel__arrow--next",
@@ -132,7 +131,6 @@ function ChoiceCarousel({
         variant: "outline",
         tone: "neutral",
         onClick: () => scrollByAmount(1),
-        disabled: !canScrollRight,
         tabIndex: -1
       }
     ) })

package/dist/components/choice-preview-card.d.ts

@@ -9,18 +9,12 @@ interface ChoicePreviewCardProps {
     preview: ReactNode;
     label: string;
     description?: string;
-    /** Ignored: the ChoiceCard has no locked state. */
-    locked?: boolean;
     disabled?: boolean;
-    /** Ignored: the ChoiceCard has no badge on the picture. */
-    badge?: ReactNode;
-    /** Ignored: the picture is always 16:9. */
-    previewAspect?: 'square' | 'video' | 'wide';
     className?: string;
 }
 /**
  * @deprecated Use ChoiceCard with layout="preview" (Figma [RDS] Content/ChoiceCard). A thin wrapper over it: `label`
- * is the children. It is a native radio now, not a toggle button; `locked`, `badge` and `previewAspect` are ignored.
+ * is the children. It is a native radio now, not a toggle button (`locked`, `badge` and `previewAspect` left in 2.0).
  */
 declare function ChoicePreviewCard({ selected, onSelect, preview, label, description, disabled, className }: ChoicePreviewCardProps): react.JSX.Element;
 

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

@@ -30,8 +30,6 @@ interface CurrencyInputProps {
     maxDigits?: number;
     /** Shows 0,00 instead of the placeholder when the value is zero. */
     showZero?: boolean;
-    /** @deprecated The [RDS] Input has one height (44). Ignored. */
-    size?: 'sm' | 'md' | 'lg';
     id?: string;
     className?: string;
 }

package/dist/components/data-table-header.js

@@ -6,7 +6,6 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Badge } from "./badge.js";
 import { Button } from "./button.js";
 import { Chip } from "./chip.js";
 import { Drawer } from "./drawer.js";
@@ -32,10 +31,17 @@ function FilterDropdown({ f, placement = "bottom-start" }) {
 }
 function FiltersButton(_c) {
   var _d = _c, { count } = _d, rest = __objRest(_d, ["count"]);
-  return /* @__PURE__ */ jsxs(Button, __spreadProps(__spreadValues({}, rest), { tone: "neutral", variant: count > 0 ? "fill" : "outline", icon: /* @__PURE__ */ jsx(SlidersIcon, {}), "data-filter-toggle": "", children: [
-    "Filtros",
-    count > 0 && /* @__PURE__ */ jsx(Badge, { value: count, tone: "neutral", variant: "soft" })
-  ] }));
+  return /* @__PURE__ */ jsx(
+    Button,
+    __spreadProps(__spreadValues({}, rest), {
+      tone: "neutral",
+      variant: count > 0 ? "fill" : "outline",
+      icon: /* @__PURE__ */ jsx(SlidersIcon, {}),
+      iconPosition: "start",
+      "data-filter-toggle": "",
+      children: count > 0 ? `Filtros \xB7 ${count}` : "Filtros"
+    })
+  );
 }
 function FilterGroups({
   filters,

package/dist/components/floating-stepper.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
  * FloatingStepper — 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 line (Reset). Where it floats is the caller's (className or a wrapper). Styles: floating-stepper.css.
+ * a vertical Separator (Reset). Where it floats is the caller's (className or a wrapper). Styles: floating-stepper.css.
  */
 type FloatingStepperStep = {
     key: string;

package/dist/components/floating-stepper.js

@@ -3,6 +3,7 @@ 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 FloatingStepper({ 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-floating-stepper", className].filter(Boolean).join(" "), children: [
@@ -25,7 +26,7 @@ function FloatingStepper({ steps, current, onNavigate, canNavigate, action, clas
       );
     }),
     action && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: "rds-floating-stepper__divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "rds-floating-stepper__divider" }),
       /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", icon: action.icon, onClick: action.onClick, children: action.label })
     ] })
   ] });

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

@@ -1,9 +1,10 @@
 import * as react from '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.
+ * ImageCropModal — Figma [RDS] Overlays/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). The crop's shade, line and handles and the stage's
+ * background are its own tokens (Overlays, image-crop-modal/*). Styles: image-crop-modal.css.
  *
  * Uso:
  *   <ImageCropModal

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

@@ -7,22 +7,14 @@ import "react-image-crop/dist/ReactCrop.css";
 import { Alert } from "./alert.js";
 import { Button } from "./button.js";
 import { Dialog } from "./dialog.js";
+import { RectangleHorizontalIcon, RectangleVerticalIcon, SquareDashedIcon, SquareIcon } from "./internal/icons.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, {}) }
+  { id: "square", label: "1:1", aspect: 1, icon: /* @__PURE__ */ jsx(SquareIcon, {}) },
+  { id: "portrait", label: "4:5", aspect: 4 / 5, icon: /* @__PURE__ */ jsx(RectangleVerticalIcon, {}) },
+  { id: "landscape", label: "16:9", aspect: 16 / 9, icon: /* @__PURE__ */ jsx(RectangleHorizontalIcon, {}) },
+  { id: "free", label: "Livre", icon: /* @__PURE__ */ jsx(SquareDashedIcon, {}) }
 ];
 const DEFAULT_MIN_ASPECT = 0.5;
 const DEFAULT_MAX_ASPECT = 2;
@@ -238,13 +230,7 @@ function ImageCropModal({
           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)."
-        ] })
+        !aspectError && imgLoaded && !busy && /* @__PURE__ */ jsx("p", { className: "rds-image-crop__hint", children: preset.aspect ? "Arraste as al\xE7as para ajustar o recorte." : `Livre: propor\xE7\xE3o entre ${minAspect.toFixed(1)} (vertical) e ${maxAspect.toFixed(1)} (horizontal).` })
       ] })
     }
   );

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

@@ -3,11 +3,10 @@ import { CropPreset } from './image-crop-modal.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;
@@ -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/index.d.ts

@@ -41,7 +41,7 @@ export { SectionHeader, SectionHeaderProps } from './section-header.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/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/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/toggle-card-compact.d.ts

@@ -1,31 +1,12 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ToggleCardProps } from './toggle-card.js';
 
-interface ToggleCardCompactProps {
-    /** An icon before the text (the Item's media). */
-    icon?: ReactNode;
-    /** The setting it turns on (the Item's title and the Switch's name). */
-    label: string;
-    /** The line under the label while off. */
-    description?: ReactNode;
-    /** The line under the label while on (a summary of what is set); it replaces `description`. */
-    summary?: ReactNode;
-    checked: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    /** Shows the pencil (an IconButton) while on: opens the setting's options (a Dialog). */
-    onEdit?: () => void;
-    /** The pencil's accessible name and tooltip. */
-    editLabel?: string;
-    /** Submits 'on' (or '') under this name with a native form, through a hidden input. */
-    name?: string;
-    disabled?: boolean;
-    className?: string;
-}
+/** @deprecated Use ToggleCardProps (with layout="compact"). */
+type ToggleCardCompactProps = Omit<ToggleCardProps, 'layout' | 'children'>;
 /**
- * ToggleCardCompact — a composition of the Item (outline), the Switch and the IconButton with its Tooltip: a
- * setting in one row, its summary under the label while on and a pencil that opens its options. Styles:
- * toggle-card-compact.css.
+ * @deprecated Use `<ToggleCard layout="compact">` (Figma [RDS] Forms/ToggleCard, layout=compact), with the same
+ * props. A thin wrapper over it, kept so the old name keeps compiling; the codemod rewrites it.
  */
-declare function ToggleCardCompact({ icon, label, description, summary, checked, onCheckedChange, onEdit, editLabel, name, disabled, className, }: ToggleCardCompactProps): react.JSX.Element;
+declare function ToggleCardCompact(props: ToggleCardCompactProps): react.JSX.Element;
 
 export { ToggleCardCompact, type ToggleCardCompactProps };

package/dist/components/toggle-card-compact.js

@@ -1,39 +1,12 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconButton } from "./icon-button.js";
-import { PencilIcon } from "./internal/icons.js";
-import { Item } from "./item.js";
-import { Switch } from "./switch.js";
-import { Tooltip } from "./tooltip.js";
-function ToggleCardCompact({
-  icon,
-  label,
-  description,
-  summary,
-  checked,
-  onCheckedChange,
-  onEdit,
-  editLabel = "Editar",
-  name,
-  disabled,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    Item,
-    {
-      variant: "outline",
-      className: ["rds-toggle-card-compact", className].filter(Boolean).join(" "),
-      media: icon,
-      title: label,
-      description: (checked ? summary : description) || void 0,
-      action: /* @__PURE__ */ jsxs("span", { className: "rds-toggle-card-compact__actions", children: [
-        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" }),
-        checked && onEdit && /* @__PURE__ */ jsx(Tooltip, { text: editLabel, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(PencilIcon, {}), label: editLabel, variant: "ghost", tone: "neutral", onClick: onEdit, disabled }) }),
-        /* @__PURE__ */ jsx(Switch, { "aria-label": label, checked, onCheckedChange, disabled })
-      ] })
-    }
-  );
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { ToggleCard } from "./toggle-card.js";
+function ToggleCardCompact(props) {
+  return /* @__PURE__ */ jsx(ToggleCard, __spreadProps(__spreadValues({}, props), { layout: "compact" }));
 }
 export {
   ToggleCardCompact

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

@@ -1,24 +1,38 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
+/** Figma [RDS] Forms/ToggleCard `layout`: the Card with the options below it, or one row (the Item). */
+type ToggleCardLayout = 'default' | 'compact';
 interface ToggleCardProps {
-    /** The setting it turns on (the Switch's label). */
+    /** `default`: a Card with the Switch and, while on, the options below it. `compact`: one row (an outline Item). */
+    layout?: ToggleCardLayout;
+    /** The setting it turns on (the Switch's label; in compact, the Item's title and the Switch's name). */
     label: string;
-    /** A line under the label (the Switch's hint). */
-    description?: string;
+    /** A line under the label (default: the Switch's hint; compact: shown while off). */
+    description?: ReactNode;
+    /** Compact only: the line under the label while on (a summary of what is set); it replaces `description`. */
+    summary?: ReactNode;
+    /** Compact only: an icon before the text (the Item's media). */
+    icon?: ReactNode;
     checked: boolean;
-    onCheckedChange: (checked: boolean) => void;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Compact only: shows the pencil (an IconButton) while on; it opens the setting's options (a Dialog). */
+    onEdit?: () => void;
+    /** Compact only: the pencil's accessible name and tooltip. Default "Editar". */
+    editLabel?: string;
     /** Submits 'on' (or '') under this name with a native form, through a hidden input. */
     name?: string;
-    /** The setting's options, shown under it while it is on. */
+    /** Default only: the setting's options, shown under it while it is on. */
     children?: ReactNode;
     disabled?: boolean;
     className?: string;
 }
 /**
- * ToggleCard — a composition of the Card and the Switch (Figma [RDS] Forms/Switch): a setting that, when on, opens
- * its own options below it. Styles: toggle-card.css.
+ * ToggleCard — Figma [RDS] Forms/ToggleCard: a setting that, when on, opens its own options. `layout="default"` is
+ * a composition of the Card and the Switch, the options below it; `layout="compact"` is one row (the Item outline,
+ * the Switch and the IconButton with its Tooltip): the summary under the label while on and a pencil that opens the
+ * options. Styles: toggle-card.css.
  */
-declare function ToggleCard({ label, description, checked, onCheckedChange, name, children, disabled, className }: ToggleCardProps): react.JSX.Element;
+declare function ToggleCard({ layout, label, description, summary, icon, checked, onCheckedChange, onEdit, editLabel, name, children, disabled, className, }: ToggleCardProps): react.JSX.Element;
 
-export { ToggleCard, type ToggleCardProps };
+export { ToggleCard, type ToggleCardLayout, type ToggleCardProps };

package/dist/components/toggle-card.js

@@ -2,10 +2,46 @@
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Card } from "./card.js";
+import { IconButton } from "./icon-button.js";
+import { PencilIcon } from "./internal/icons.js";
+import { Item } from "./item.js";
 import { Switch } from "./switch.js";
-function ToggleCard({ label, description, checked, onCheckedChange, name, children, disabled, className }) {
+import { Tooltip } from "./tooltip.js";
+function ToggleCard({
+  layout = "default",
+  label,
+  description,
+  summary,
+  icon,
+  checked,
+  onCheckedChange,
+  onEdit,
+  editLabel = "Editar",
+  name,
+  children,
+  disabled,
+  className
+}) {
+  const hidden = name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" });
+  if (layout === "compact") {
+    return /* @__PURE__ */ jsx(
+      Item,
+      {
+        variant: "outline",
+        className: ["rds-toggle-card", "rds-toggle-card--compact", className].filter(Boolean).join(" "),
+        media: icon,
+        title: label,
+        description: (checked ? summary : description) || void 0,
+        action: /* @__PURE__ */ jsxs("span", { className: "rds-toggle-card__actions", children: [
+          hidden,
+          checked && onEdit && /* @__PURE__ */ jsx(Tooltip, { text: editLabel, children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(PencilIcon, {}), label: editLabel, variant: "ghost", tone: "neutral", onClick: onEdit, disabled }) }),
+          /* @__PURE__ */ jsx(Switch, { "aria-label": label, checked, onCheckedChange, disabled })
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(Card, { as: "div", className: ["rds-toggle-card", className].filter(Boolean).join(" "), children: [
-    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "on" : "" }),
+    hidden,
     /* @__PURE__ */ jsx("div", { className: "rds-toggle-card__header", children: /* @__PURE__ */ jsx(Switch, { checked, onCheckedChange, hint: description, disabled, children: label }) }),
     checked && children && /* @__PURE__ */ jsx("div", { className: "rds-toggle-card__content", children })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.11",
+  "version": "2.0.0-next.12",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",

package/styles/rds/components-styles.css

@@ -2978,7 +2978,7 @@ input:focus-visible + .rds-checkbox__box {
 /*
  * ChoiceCarousel: no tokens of its own; the IconButtons bring theirs. A row that scrolls sideways and snaps to each
  * option (160 wide, 200 from 768), 12 apart, no scrollbar. From 768 the outline arrows sit on the row's edges, half
- * outside, and fade away when there is nothing more that way.
+ * outside, and are not there when there is nothing more that way.
  */
 .rds-choice-carousel {
   position: relative;
@@ -3032,7 +3032,6 @@ input:focus-visible + .rds-checkbox__box {
     display: inline-flex;
     border-radius: var(--radius-full);
     box-shadow: var(--elevation-raised);
-    transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
   }
 
   .rds-choice-carousel__arrow--prev {
@@ -3044,11 +3043,6 @@ input:focus-visible + .rds-checkbox__box {
     right: 0;
     transform: translate(50%, -50%);
   }
-
-  .rds-choice-carousel__arrow[aria-disabled='true'] {
-    opacity: 0;
-    pointer-events: none;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -3584,7 +3578,7 @@ input:focus-visible + .rds-checkbox__box {
 /* components/data-table-header.css */
 /* @tokens data-table-header */
 /*
- * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Badge, Separator, DropdownMenu,
+ * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, DropdownMenu,
  * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table; the search takes the free width. The wide
  * parts show from 768, the narrow ones below it. In the Popover and the Drawer the filters stack 16 apart, each
  * one a caption-sized label over its chips.
@@ -4409,8 +4403,8 @@ input:focus-visible + .rds-checkbox__box {
 /* @tokens floating-stepper */
 /*
  * FloatingStepper: no tokens of its own; the Card and the Buttons bring theirs. A pill (radius/full) of 44 Buttons,
- * 4 inside and 4 apart, raised by elevation/overlay because it floats over the page. A 1 × 24 line in the card's
- * border colour before the action.
+ * 4 inside and 4 apart, raised by elevation/overlay because it floats over the page. A vertical Separator, 24
+ * tall, before the action.
  */
 .rds-floating-stepper {
   flex-direction: row;
@@ -4429,12 +4423,9 @@ input:focus-visible + .rds-checkbox__box {
   border-radius: var(--radius-full);
 }
 
-.rds-floating-stepper__divider {
-  flex: none;
-  width: var(--border-width);
+.rds-floating-stepper > .rds-floating-stepper__divider {
+  align-self: center;
   height: var(--size-24);
-  margin-inline: var(--space-4);
-  background: var(--card-border);
 }
 
 /* components/footer.css */
@@ -4904,10 +4895,11 @@ input:focus-visible + .rds-checkbox__box {
 /* components/image-crop-modal.css */
 /* @tokens image-crop-modal */
 /*
- * ImageCropModal: no tokens of its own; the Dialog, the ToggleGroup, the Alert and the Spinner bring theirs. 12
- * apart: the presets (they share the width), the stage (at least 300, at most 60% of the viewport, the image
- * letterboxed inside 16 of padding, a line in the dialog's border colour), the error or the hint. While sending,
- * the dialog's scrim covers the image.
+ * ImageCropModal (Figma [RDS] Overlays/ImageCropModal): the Dialog, the ToggleGroup, the Alert and the Spinner bring
+ * their tokens; the crop brings its own (Overlays, image-crop-modal/*). 12 apart: the presets (they share the
+ * width), the stage (320 tall, on image-crop-modal/stage/background, the image letterboxed inside 16 of padding, a
+ * line in the dialog's border colour), the error or the hint. Over the image, outside the crop, the shade; the crop's
+ * line and its handles in their own colours. While sending, the dialog's scrim covers the stage.
  */
 .rds-image-crop {
   display: flex;
@@ -4930,17 +4922,42 @@ input:focus-visible + .rds-checkbox__box {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 300px;
+  height: 320px;
+  /* On a short viewport (a phone on its side) the stage gives way so the footer stays in view. */
   max-height: 60vh;
   padding: var(--space-16);
   overflow: hidden;
+  background: var(--image-crop-modal-stage-background);
   border: var(--border-width) solid var(--dialog-border);
   border-radius: var(--radius-control);
 }
 
+/*
+ * react-image-crop's own stylesheet is unlayered, so it wins over these layered rules wherever both set the same
+ * property. The shade is an SVG rect with fill as an attribute (black at 50%): any CSS beats it. The handles read
+ * the library's variables, set here. The selection's marching ants are hard-coded: the two !important take them
+ * off so the crop is one solid line in the selection colour (the library's focus outline stays).
+ */
 .rds-image-crop__crop {
   max-width: 100%;
-  max-height: calc(60vh - var(--space-32));
+  max-height: calc(min(320px, 60vh) - var(--space-32));
+  --rc-drag-handle-bg-colour: var(--image-crop-modal-handle);
+  --rc-border-color: var(--image-crop-modal-handle);
+}
+
+.rds-image-crop__crop .ReactCrop__crop-mask > rect {
+  fill: var(--image-crop-modal-shade);
+  fill-opacity: 1;
+}
+
+.rds-image-crop__crop .ReactCrop__crop-selection {
+  background-image: none !important;
+  border: var(--border-width) solid var(--image-crop-modal-selection);
+  animation: none !important;
+}
+
+.rds-image-crop__crop .ReactCrop__drag-handle {
+  border-radius: var(--radius-xs);
 }
 
 .rds-image-crop__image {
@@ -7358,8 +7375,9 @@ body:has(.rds-modal) {
 /* @tokens page-skeleton */
 /*
  * PageSkeleton and CardsSkeleton: no tokens of their own; the Skeleton and the Card bring theirs. Blocks 24 apart
- * (24 padding when padded). The table is a small Card: the header row on the card's footer background, a line
- * between rows. The cards: 2 per row (4 from 1024), the charts 1 (2 from 1024), 16 apart.
+ * (24 padding when padded). The Cards keep their elevation/raised, as in the Figma. The table is a small Card: the
+ * header row on the card's footer background, a line between rows. The cards: 2 per row (4 from 1024), the charts
+ * 1 (2 from 1024), 16 apart.
  */
 .rds-page-skeleton {
   display: flex;
@@ -7378,10 +7396,6 @@ body:has(.rds-modal) {
   gap: var(--space-16);
 }
 
-.rds-page-skeleton__table {
-  box-shadow: none;
-}
-
 .rds-page-skeleton__row {
   display: flex;
   align-items: center;
@@ -7428,7 +7442,6 @@ body:has(.rds-modal) {
 .rds-page-skeleton__card {
   gap: var(--space-12);
   padding: var(--space-16);
-  box-shadow: none;
 }
 
 .rds-page-skeleton__card .rds-skeleton {
@@ -10642,23 +10655,13 @@ tbody > tr:last-child > .rds-table__status {
   }
 }
 
-/* components/toggle-card-compact.css */
-/* @tokens toggle-card-compact */
-/*
- * ToggleCardCompact: no tokens of its own; the Item, the Switch and the IconButton bring theirs. The pencil and the
- * Switch 8 apart at the end of the row.
- */
-.rds-toggle-card-compact__actions {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-8);
-}
-
 /* components/toggle-card.css */
 /* @tokens toggle-card */
 /*
- * ToggleCard: no tokens of its own; the Card and the Switch bring theirs. The Switch row pads 16 on the sides (4 top and
- * bottom); the options under it pad 16, 16 apart, after a line in the card's border colour.
+ * ToggleCard: no tokens of its own; the Card, the Item, the Switch and the IconButton bring theirs.
+ * layout=default: the Switch row pads 16 on the sides (4 top and bottom); the options under it pad 16, 16 apart,
+ * after a line in the card's border colour.
+ * layout=compact: the outline Item; the pencil and the Switch 8 apart at the end of the row.
  */
 .rds-toggle-card__header {
   padding: var(--space-4) var(--space-16);
@@ -10672,6 +10675,12 @@ tbody > tr:last-child > .rds-table__status {
   border-top: var(--border-width) solid var(--card-border);
 }
 
+.rds-toggle-card__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+
 /* components/toggle-group.css */
 /* @tokens toggle-group */
 /* ToggleGroup: Toggles side by side, 4 apart (Figma: slot items, gap space/4). No tokens of its own. */

package/styles/rds/components.css

@@ -1006,5 +1006,9 @@
   --sheet-text: var(--text-body);
   --sheet-title: var(--text-heading);
   --dialog-scrim: var(--surface-scrim);
+  --image-crop-modal-shade: var(--surface-scrim);
+  --image-crop-modal-selection: var(--text-on-cover);
+  --image-crop-modal-handle: var(--text-on-cover);
+  --image-crop-modal-stage-background: var(--surface-muted);
 }
 }