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

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,21 @@ 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.
+ * Toaster — the region where the toasts of the Figma [RDS] Feedback/Toast appear (Radix Toast): bottom-center on
+ * every screen width (no switch by breakpoint; on the phone, the width minus 16 on each side), up to three at a time
+ * (a fourth pushes the oldest out). With a bar at the foot on screen (FormActions, SavingBar) the stack rises above
+ * it (--toast-offset-bottom, filled by the bar) and goes back to 16 when the bar leaves. Each one is announced in a
+ * live region (danger 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.3",
+  "version": "2.0.0-next.31",
   "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.10"
   },
   "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 {