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

package/dist/components/status.d.ts

@@ -3,19 +3,19 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 /**
- * Figma calls this property `style`: outline (white pill with a hairline, for coloured bands), soft (light plate
+ * The emphasis (Figma: `variant`): outline (white pill with a hairline, for coloured bands), soft (light plate
  * with the tone's dark text, for dark backgrounds), fill (the tone's plate, for neutral backgrounds).
  */
 type StatusVariant = 'outline' | 'soft' | 'fill';
-type StatusSize = 'default' | 'sm';
+type StatusSize = 'md' | 'sm';
 interface StatusProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** The state, in one or two words (Figma: `label`). The text says the state; the dot only adds colour. */
     children: ReactNode;
     /** neutral (a record: draft, closed), info (in progress), success (done), warning (pending), danger (failed). */
     tone?: StatusTone;
     variant?: StatusVariant;
-    /** default 32 tall; sm 24 (dot 6), for narrow cards and table rows. */
-    size?: StatusSize;
+    /** md 32 tall (default); sm 24 (dot 6), for narrow cards and table rows. `'default'` is deprecated (2.0.0-next): it is `'md'`. */
+    size?: StatusSize | 'default';
 }
 /**
  * Status — Figma [RDS] Indicators/Status. A state that changes over time ("Em análise", "Concluído"): a pill with a

package/dist/components/status.js

@@ -8,7 +8,7 @@ function Status(_a) {
   var _b = _a, {
     tone = "neutral",
     variant = "outline",
-    size = "default",
+    size = "md",
     children,
     className
   } = _b, rest = __objRest(_b, [
@@ -21,7 +21,7 @@ function Status(_a) {
   return /* @__PURE__ */ jsxs(
     "span",
     __spreadProps(__spreadValues({}, rest), {
-      className: ["rds-status", `rds-status--${tone}-${variant}`, `rds-status--${size}`, className].filter(Boolean).join(" "),
+      className: ["rds-status", `rds-status--${tone}-${variant}`, `rds-status--${size === "default" ? "md" : size}`, className].filter(Boolean).join(" "),
       children: [
         /* @__PURE__ */ jsx("span", { className: "rds-status__dot", "aria-hidden": "true" }),
         children

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/summary-bar.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
-import { StatTone } from './stat.js';
+import { StatTone, LegacyStatTone } from './stat.js';
 
 /** @deprecated Use StatTone. */
 type SummaryBarTone = StatTone;
@@ -8,7 +8,8 @@ type SummaryBarTone = StatTone;
 interface SummaryBarItem {
     label: string;
     value: string;
-    tone?: StatTone;
+    /** `'muted'` (the 2.0.0-next tone) is the Stat's `muted`. */
+    tone?: StatTone | LegacyStatTone | 'muted';
     /** Ignored: the Stat has no icon in the Figma [RDS]. */
     icon?: ReactNode;
 }

package/dist/components/summary-bar.js

@@ -9,7 +9,16 @@ import { Children } from "react";
 import { Stat, StatFramedDefault } from "./stat.js";
 function SummaryBar(_a) {
   var _b = _a, { children, layout = "row", items, className } = _b, rest = __objRest(_b, ["children", "layout", "items", "className"]);
-  const cells = items ? items.map((item, i) => /* @__PURE__ */ jsx(Stat, { label: item.label, value: item.value, tone: item.tone }, i)) : Children.toArray(children);
+  const cells = items ? items.map((item, i) => /* @__PURE__ */ jsx(
+    Stat,
+    {
+      label: item.label,
+      value: item.value,
+      tone: item.tone === "muted" ? void 0 : item.tone,
+      muted: item.tone === "muted"
+    },
+    i
+  )) : Children.toArray(children);
   return /* @__PURE__ */ jsx(StatFramedDefault.Provider, { value: false, children: /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, rest), { className: ["rds-summary-bar", `rds-summary-bar--${layout}`, className].filter(Boolean).join(" "), children: cells.map((cell, i) => /* @__PURE__ */ jsx("li", { className: "rds-summary-bar__cell", children: cell }, i)) })) });
 }
 export {

package/dist/components/tile.d.ts

@@ -2,18 +2,18 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 type TileTone = 'action' | 'neutral' | 'info' | 'success' | 'warning' | 'danger';
-/** Figma calls this property `style`; here it is `variant` because `style` belongs to React. */
+/** The emphasis (Figma: `variant`). */
 type TileVariant = 'fill' | 'soft';
-type TileSize = 'sm' | 'default' | 'lg';
+type TileSize = 'sm' | 'md' | 'lg';
 interface TileProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** The icon (Figma: `icon`), an inline SVG. The Tile sizes it: 16, 24 or 32. */
     icon: ReactNode;
     /** action is the brand; the others follow feedback: success only for what went right, danger for what went wrong. */
     tone?: TileTone;
-    /** fill is strong; soft is light, with the icon in the tone's colour (Figma: `style`). Same variant across a list. */
+    /** fill is strong; soft is light, with the icon in the tone's colour (Figma: `variant`). Same variant across a list. */
     variant?: TileVariant;
-    /** sm 32, default 48, lg 64. */
-    size?: TileSize;
+    /** sm 32, md 48 (default), lg 64 (Figma: `size`). `'default'` is deprecated (2.0.0-next): it is `'md'`. */
+    size?: TileSize | 'default';
 }
 /**
  * Tile — Figma [RDS] Content/Tile. An icon with weight, in a circle: a benefit in a list, a card's header, the top

package/dist/components/tile.js

@@ -5,13 +5,13 @@ import {
 } from "../chunk-ORMEWXMH.js";
 import { jsx } from "react/jsx-runtime";
 function Tile(_a) {
-  var _b = _a, { icon, tone = "action", variant = "fill", size = "default", className } = _b, rest = __objRest(_b, ["icon", "tone", "variant", "size", "className"]);
+  var _b = _a, { icon, tone = "action", variant = "fill", size = "md", className } = _b, rest = __objRest(_b, ["icon", "tone", "variant", "size", "className"]);
   return /* @__PURE__ */ jsx(
     "span",
     __spreadProps(__spreadValues({
       "aria-hidden": "true"
     }, rest), {
-      className: ["rds-tile", `rds-tile--${tone}-${variant}`, `rds-tile--${size}`, className].filter(Boolean).join(" "),
+      className: ["rds-tile", `rds-tile--${tone}-${variant}`, `rds-tile--${size === "default" ? "md" : size}`, className].filter(Boolean).join(" "),
       children: icon
     })
   );

package/dist/components/time-picker.d.ts

@@ -38,7 +38,7 @@ declare function parseTime(text: string): string | null;
 declare function formatTime(time: string, format?: TimeFormat): string;
 /**
  * TimePicker — Figma [RDS] Forms/TimePicker. A time field that takes typing (HH:mm, the colon comes by itself) and
- * opens the list of times in the chosen step (Figma: menu=open). It is the Input with the clock at the end and the
+ * opens the list of times in the chosen step (Figma: open=true). It is the Input with the clock at the end and the
  * Listbox under it (ARIA combobox), as the DatePicker is the Input with the Calendar: the focus stays in the field,
  * the arrows walk the list, Enter chooses and Escape closes without changing. No tokens of its own (--input-*,
  * --listbox-*). A date is the DatePicker; a duration, the NumberInput. Styles: time-picker.css,

package/dist/components/toast.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 type ToastTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
-/** Figma calls this property `style`: outline (white with a border, the default), soft (light plate), fill (full plate). */
+/** The emphasis (Figma: `variant`): outline (white with a border, the default), soft (light plate), fill (full plate). */
 type ToastVariant = 'outline' | 'soft' | 'fill';
 interface ToastOptions {
     /** What happened, in a few words (Figma: `title`). */
@@ -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
 };

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/dist/components/toggle.d.ts

@@ -8,7 +8,7 @@ interface ToggleProps extends Omit<ComponentPropsWithRef<typeof TogglePrimitive.
     children?: ReactNode;
     /** Icon before the text (Figma: `showIcon` + `iconName`). Decorative, rendered with aria-hidden. */
     icon?: ReactNode;
-    /** The emphasis (Figma: `style`): ghost in a toolbar, outline when it stands alone. */
+    /** The emphasis (Figma: `variant`): ghost in a toolbar, outline when it stands alone. */
     variant?: ToggleVariant;
     /** Rendered as aria-disabled="true": stays in the tab order and takes focus, but does not toggle. */
     disabled?: boolean;

package/dist/components/typing-indicator.d.ts

@@ -1,12 +1,12 @@
 import * as react from 'react';
 
-/** @deprecated Use Bubble with variant="typing". */
+/** @deprecated Use Bubble with `typing`. */
 interface TypingIndicatorProps {
     /** What a screen reader hears. Default "Digitando". */
     ariaLabel?: string;
 }
 /**
- * @deprecated Use `<Bubble variant="typing" />` (Figma [RDS] Chat/Bubble, style=typing). A thin wrapper over it: the
+ * @deprecated Use `<Bubble typing />` (Figma [RDS] Chat/Bubble, typing=true). A thin wrapper over it: the
  * label becomes the bubble's announcement.
  */
 declare function TypingIndicator({ ariaLabel }: TypingIndicatorProps): react.JSX.Element;

package/dist/components/typing-indicator.js

@@ -2,7 +2,7 @@ import "../chunk-ORMEWXMH.js";
 import { jsx } from "react/jsx-runtime";
 import { Bubble } from "./bubble.js";
 function TypingIndicator({ ariaLabel = "Digitando" }) {
-  return /* @__PURE__ */ jsx(Bubble, { variant: "typing", align: "start", children: ariaLabel });
+  return /* @__PURE__ */ jsx(Bubble, { typing: true, align: "start", children: ariaLabel });
 }
 export {
   TypingIndicator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.21",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -100,6 +100,7 @@
   },
   "files": [
     "LICENSE",
+    "THIRD_PARTY_NOTICES.md",
     "README.md",
     "dist",
     "styles"
@@ -167,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",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.1"
+    "@rojaostudio/ds-core": "1.1.0-next.8"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",
@@ -207,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/base.css

@@ -26,9 +26,17 @@
    Run `pnpm build:tokens` in the DS to regenerate.
    ───────────────────────────────────────────────────────────── */
 
+/* Cascade layers, lowest first: the same order rds.css declares, whichever of the two is imported first.
+   Everything of this file except Tailwind's @utility and @theme blocks (which Tailwind wants at the top level)
+   lives in rds.legacy, below rds.theme: with rds.css also imported, the 2.0 variables win wherever the names
+   collide (--surface-page, --text-muted, --border-default, --radius-card, --z-modal, --space-*, --toast-text…)
+   and the h1–h6 rule loses to the 2.0 components. */
+@layer rds.legacy, rds.theme, rds.tokens, rds.components;
+
 /* Primitives — auto-generated from tokens/index.ts */
-@import "./_primitives.generated.css";
+@import "./_primitives.generated.css" layer(rds.legacy);
 
+@layer rds.legacy {
 /* ── CSS Custom Properties — light (default, neutral theme) ── */
 /* .ds-scope: qualquer wrapper que precise recalcular tokens de COMPONENTE (ex.
    --option-tile-bg) sob um override local de token SEMÂNTICO (ex. --surface-default)
@@ -724,6 +732,7 @@ h1, h2, h3, h4, h5, h6 {
   .rojao-toast--enter-top, .rojao-toast--enter-bottom,
   .rojao-toast--exit-top,  .rojao-toast--exit-bottom { animation: none; }
 }
+} /* @layer rds.legacy */
 
 /* ── Control size utilities — h-control-sm/md/lg, size-control-sm/md/lg ── */
 @utility h-control-sm   { height: var(--space-control-height-sm); }
@@ -925,6 +934,9 @@ h1, h2, h3, h4, h5, h6 {
  * sem ele, num botão com borda da mesma família de cor, o anel some dentro da
  * borda. E ele é desenhado com a cor da superfície, então funciona igual sobre
  * fundo claro e sobre o escuro do chrome.
+ *
+ * Stays in Tailwind's `base` layer, not in rds.legacy: it sets no variable, and in `base` Tailwind's utilities
+ * (`outline-none`) still win over it, as they did in 1.x. Both layers sit below the rds.* ones.
  */
 @layer base {
   :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {