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

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.30",
   "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 {