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

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.13",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -168,7 +168,6 @@
     "playwright": "^1.63.0",
     "react-image-crop": "^11.0.10",
     "react-international-phone": "^4.8.0",
-    "ts-morph": "^28.0.0",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5",
@@ -208,6 +207,6 @@
     "lint": "eslint .",
     "build:brands": "tsx scripts/build-brands.ts",
     "build:rds": "tsx scripts/build-rds-tokens.ts",
-    "migrate:consumer": "tsx scripts/migrate-consumer.ts"
+    "migrate:consumer": "tsx ../codemod/src/cli.ts"
   }
 }

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.
@@ -4405,38 +4399,6 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
-/* components/floating-stepper.css */
-/* @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.
- */
-.rds-floating-stepper {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-4);
-  width: max-content;
-  max-width: 100%;
-  padding: var(--space-4);
-  border-radius: var(--radius-full);
-  box-shadow: var(--elevation-overlay);
-  overflow-x: auto;
-}
-
-.rds-floating-stepper > .rds-button {
-  flex: none;
-  border-radius: var(--radius-full);
-}
-
-.rds-floating-stepper__divider {
-  flex: none;
-  width: var(--border-width);
-  height: var(--size-24);
-  margin-inline: var(--space-4);
-  background: var(--card-border);
-}
-
 /* components/footer.css */
 /* @tokens footer */
 /*
@@ -4901,13 +4863,14 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
-/* components/image-crop-modal.css */
-/* @tokens image-crop-modal */
+/* components/image-crop-dialog.css */
+/* @tokens image-crop-dialog */
 /*
- * 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.
+ * ImageCropDialog (Figma [RDS] Overlays/ImageCropDialog): the Dialog, the ToggleGroup, the Alert and the Spinner bring
+ * their tokens; the crop brings its own (Overlays, image-crop-dialog/*). 12 apart: the presets (they share the
+ * width), the stage (320 tall, on image-crop-dialog/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 +4893,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-dialog-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-dialog-handle);
+  --rc-border-color: var(--image-crop-dialog-handle);
+}
+
+.rds-image-crop__crop .ReactCrop__crop-mask > rect {
+  fill: var(--image-crop-dialog-shade);
+  fill-opacity: 1;
+}
+
+.rds-image-crop__crop .ReactCrop__crop-selection {
+  background-image: none !important;
+  border: var(--border-width) solid var(--image-crop-dialog-selection);
+  animation: none !important;
+}
+
+.rds-image-crop__crop .ReactCrop__drag-handle {
+  border-radius: var(--radius-xs);
 }
 
 .rds-image-crop__image {
@@ -7358,8 +7346,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 +7367,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 +7413,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 {
@@ -9708,6 +9692,35 @@ input:focus-visible + .rds-radio__circle {
   }
 }
 
+/* components/stepper.css */
+/* @tokens stepper */
+/*
+ * Stepper: 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 vertical Separator, 24
+ * tall, before the action.
+ */
+.rds-stepper {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-4);
+  width: max-content;
+  max-width: 100%;
+  padding: var(--space-4);
+  border-radius: var(--radius-full);
+  box-shadow: var(--elevation-overlay);
+  overflow-x: auto;
+}
+
+.rds-stepper > .rds-button {
+  flex: none;
+  border-radius: var(--radius-full);
+}
+
+.rds-stepper > .rds-stepper__divider {
+  align-self: center;
+  height: var(--size-24);
+}
+
 /* components/summary-bar.css */
 /* @tokens summary-bar */
 /*
@@ -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-dialog-shade: var(--surface-scrim);
+  --image-crop-dialog-selection: var(--text-on-cover);
+  --image-crop-dialog-handle: var(--text-on-cover);
+  --image-crop-dialog-stage-background: var(--surface-muted);
 }
 }