flet-box 1.1.2 → 1.1.3

package/src/utils/themes.js

@@ -1,5 +1,6 @@
 // src/components/flet-box/utils/themes.js
 import { readableInk } from "./readableInk.js";
+import { ACCENT_PRESETS, accentSurfaces, accentTokens, accentStop } from "./colors.js";
 
 // ========== DEFAULT COLORS (static, safe) ==========
 const DEFAULT_COLORS = {
@@ -325,9 +326,30 @@ const syncBrowserChrome = () => {
 const applyPalette = (themeName) => {
   const palette = palettes[themeName];
   if (palette) {
-    Object.keys(palette).forEach((key) => {
+    // The accent sits on top of the neutral scale and owns three tokens by
+    // default — `primary`, the ink that reads on it and its tint — so switching
+    // theme keeps every surface and moves only the brand. Worn as a *theme*
+    // (`setAccent(id, { surfaces: true })`) it also writes the page, the panels,
+    // the cards and the hairlines off the same five stops, which is the difference
+    // between a colored button and a colored app. Merging here, rather than
+    // writing the tokens straight onto `colors`, is what makes the choice survive a
+    // `setTheme`, an OS flip and a re-register: the layer is re-applied on every
+    // repaint instead of being overwritten by the next palette.
+    //
+    // It therefore also wins over a palette's own `primary`, including one an app
+    // wrote with `registerPalette` — the reader's choice of color is the later
+    // word. An app that wants its brand back calls `setAccent(null)`.
+    const accent = activeAccent ? accents[activeAccent] : null;
+    const layer = accent
+      ? {
+          ...accent[themeName],
+          ...(accentSurfacesOn && accent[`${themeName}Surfaces`]),
+        }
+      : null;
+    const merged = layer ? { ...palette, ...layer } : palette;
+    Object.keys(merged).forEach((key) => {
       if (colors.hasOwnProperty(key)) {
-        colors[key] = palette[key];
+        colors[key] = merged[key];
       }
     });
   }
@@ -402,6 +424,243 @@ export const registerPalette = (themeName, palette) => {
   return palettes[themeName];
 };
 
+// ========== ACCENTS ==========
+/**
+ * The selectable brand colors, keyed by id.
+ *
+ * An accent is not a fourth palette: it is the three tokens a palette cannot
+ * agree on between its own two themes. `palettes.light` and `palettes.dark`
+ * still own every surface, border and ink; this map owns only `primary`,
+ * `onPrimary` and `primaryBg`, and `applyPalette` lays it over whichever palette
+ * is live. That is why one tap changes the buttons, icons and selection of the
+ * screen without changing whether the screen is dark.
+ *
+ * @type {Object<string, {id: string, label: string, light: Object, dark: Object}>}
+ */
+const accents = {};
+
+/** What the stored value puts between a family's id and "it also paints the page". */
+const SURFACES_SUFFIX = "+surfaces";
+
+/** The accent currently laid over the palette, or `null` for the palette's own. */
+let activeAccent = null;
+
+/** Whether that accent also paints the page and its panels, or only the brand. */
+let accentSurfacesOn = false;
+
+/**
+ * The three tokens one end of an accent writes, from either shape an accent can
+ * arrive in: a family's ramp, whose wash is a designed stop, or a bare hex, whose
+ * wash has to be derived.
+ *
+ * @param {string|string[]} spec - The accent for one theme.
+ * @param {"light"|"dark"} theme
+ */
+const accentLayer = (spec, theme) =>
+  accentTokens(
+    Array.isArray(spec) ? accentStop(spec, theme) : spec,
+    theme,
+    Array.isArray(spec) ? spec : undefined
+  );
+
+/**
+ * The page and panel tokens the same end writes when the accent is worn as a
+ * theme. Only a ramp can produce them: five stops are a scale, and a bare brand
+ * hex is one color with no lightness to walk.
+ *
+ * @param {string|string[]} spec
+ * @param {"light"|"dark"} theme
+ * @returns {Object|null}
+ */
+const accentSurfaceLayer = (spec, theme) =>
+  Array.isArray(spec) ? accentSurfaces(spec, theme) : null;
+
+const putAccent = (preset) => {
+  const { id, label, light, dark } = preset || {};
+  if (!id || !light || !dark) return null;
+  accents[id] = {
+    id,
+    label: label || id,
+    light: accentLayer(light, "light"),
+    dark: accentLayer(dark, "dark"),
+    lightSurfaces: accentSurfaceLayer(light, "light"),
+    darkSurfaces: accentSurfaceLayer(dark, "dark"),
+    // Kept only when the accent arrived as a ramp; a picker paints the family,
+    // not just its accent stop, and a pair of hexes has no family to show.
+    ramp: Array.isArray(light) || Array.isArray(dark) ? { light, dark } : null,
+  };
+  return accents[id];
+};
+
+ACCENT_PRESETS.forEach(putAccent);
+
+/**
+ * Writes the reader's accent choice down, or removes it. `window` is the test, not
+ * a try/catch around the call, for the same reason `setTheme` uses it: Node 22+
+ * has a global `localStorage` that warns and throws.
+ *
+ * Surfaces ride on the end of the same value (`"teal+surfaces"`) so the stored
+ * form stays a string a person can read in devtools, and a bare id — what every
+ * app wrote before surfaces existed — still parses.
+ * @param {string|null} id
+ * @param {boolean} surfaces
+ */
+const persistAccent = (id, surfaces) => {
+  if (typeof window === "undefined") return;
+  try {
+    if (id) {
+      localStorage.setItem(
+        "fletbox-accent",
+        surfaces ? `${id}${SURFACES_SUFFIX}` : id,
+      );
+    } else localStorage.removeItem("fletbox-accent");
+  } catch (e) {
+    // A full or private store is not a reason to stop painting the page.
+  }
+};
+
+/**
+ * The stored accent, when it is one the engine knows. A stale id — a family an
+ * older build shipped and this one dropped — reads as "no choice" rather than
+ * painting a color nothing derives from.
+ * @returns {{id: string, surfaces: boolean}|null}
+ */
+const readStoredAccent = () => {
+  try {
+    const raw = localStorage.getItem("fletbox-accent");
+    if (!raw) return null;
+    const surfaces = raw.endsWith(SURFACES_SUFFIX);
+    const id = surfaces ? raw.slice(0, -SURFACES_SUFFIX.length) : raw;
+    return id && accents[id] ? { id, surfaces } : null;
+  } catch (e) {
+    return null;
+  }
+};
+
+/**
+ * Adds (or replaces) one selectable accent.
+ *
+ * The pair is what a picker shows and what the engine paints: `light` is the deep
+ * end of the hue, dark enough to carry white words on a light page, and `dark` is
+ * the lifted end, bright enough to carry a dark page's own ink. The ink and the
+ * soft tint are derived from each stop, so an app cannot register a family whose
+ * label is unreadable — the same derivation the shipped presets pass.
+ *
+ * Each end may be a single hex or a five-stop ramp (dark-to-light in `light`,
+ * bright-to-dark in `dark`), in which case the accent and its wash are read off
+ * the stops the shipped families use.
+ *
+ * Repaints only when the id being replaced is the one on screen.
+ *
+ * @param {Object} preset
+ * @param {string} preset.id - Stable key, e.g. `"teal"`.
+ * @param {string} [preset.label] - Accessible name shown to the reader; defaults to `id`.
+ * @param {string|string[]} preset.light - The accent, or its ramp, for the light theme.
+ * @param {string|string[]} preset.dark - The accent, or its ramp, for the dark theme.
+ * @returns {Object|null} The stored accent, or `null` when the preset is incomplete.
+ */
+export const registerAccent = (preset) => {
+  const accent = putAccent(preset);
+  if (!accent) return null;
+  if (activeAccent === accent.id) applyPalette(getTheme());
+  return accent;
+};
+
+/**
+ * Lays an accent over the live palette and persists the choice.
+ *
+ * Pass `null` (or an unknown id) to take it back off: the screen returns to
+ * whatever `primary` the palette itself ships, and the stored preference is
+ * cleared so the next boot does it too.
+ *
+ * With `{ surfaces: true }` the family is worn as a whole theme: the same five
+ * stops also write `background`, `surface`, `card`, `border` and `divider`, so the
+ * page, the panels and the hairlines take the hue and not only the buttons. The
+ * ink scale, the focus ring and the semantic signals stay the palette's — a tinted
+ * theme still has to be able to say "this failed". An accent registered as a bare
+ * pair of hexes has no scale to walk, so it keeps painting brand only.
+ *
+ * @param {string|null} id - A registered accent, or `null` for the palette's own.
+ * @param {Object} [options]
+ * @param {boolean} [options.surfaces] - Also paint the page and its panels.
+ * @returns {Object} The updated `colors` object.
+ */
+export const setAccent = (id, options) => {
+  if (id && !accents[id]) return colors;
+  activeAccent = id || null;
+  accentSurfacesOn = Boolean(
+    activeAccent && options?.surfaces && accents[activeAccent].lightSurfaces,
+  );
+  persistAccent(activeAccent, accentSurfacesOn);
+  applyPalette(getTheme());
+  return colors;
+};
+
+/**
+ * Applies an accent only when the reader has never picked one.
+ *
+ * This is the one an app calls at boot with its own brand: it sets the default
+ * without writing the reader's preference down, so a picker still shows nothing
+ * selected on the first visit and a later choice still wins over it.
+ *
+ * @param {string} id - A registered accent.
+ * @param {Object} [options]
+ * @param {boolean} [options.surfaces] - Wear it as a theme, not only as a brand.
+ * @returns {string|null} The accent now active.
+ */
+export const applyAccentPreference = (id, options) => {
+  if (readStoredAccent() || !accents[id]) return activeAccent;
+  activeAccent = id;
+  accentSurfacesOn = Boolean(
+    options?.surfaces && accents[id].lightSurfaces,
+  );
+  applyPalette(getTheme());
+  return activeAccent;
+};
+
+/**
+ * The accent currently laid over the palette.
+ * @returns {string|null} Its id, or `null` when the palette's own `primary` is showing.
+ */
+export const getAccent = () => activeAccent;
+
+/**
+ * Whether the active accent also paints the page and its panels, or only the brand.
+ *
+ * A picker needs this to decide whether a tap on the cell already ticked is a
+ * no-op: the same family means two different things, and re-tapping it to move
+ * between them must repaint.
+ *
+ * @returns {boolean}
+ */
+export const getAccentSurfaces = () => accentSurfacesOn;
+
+/**
+ * Every selectable accent, in registration order, as the two stops a picker paints.
+ * @returns {Array<{id: string, label: string, light: string, dark: string}>}
+ */
+export const listAccents = () =>
+  Object.values(accents).map(({ id, label, light, dark }) => ({
+    id,
+    label,
+    light: light.primary,
+    dark: dark.primary,
+  }));
+
+/**
+ * The same list with each family's five stops beside it, for a picker that shows
+ * the ramp rather than one square: `light` runs dark-to-light and `dark`
+ * bright-to-dark, so the accent stop of each theme is the one `listAccents` names.
+ * @returns {Array<{id: string, label: string, light: string[], dark: string[]}>}
+ */
+export const listAccentRamps = () =>
+  Object.values(accents).filter(({ ramp }) => ramp).map(({ id, label, ramp }) => ({
+    id,
+    label,
+    light: ramp.light,
+    dark: ramp.dark,
+  }));
+
 /**
  * Returns the currently active theme name.
  * Reads from `localStorage` first; falls back to the OS
@@ -528,7 +787,10 @@ export const ThemeProvider = ({ children, theme = null }) => {
  *   getTheme: function,
  *   toggleTheme: function,
  *   getColor: function,
- *   applySystemTheme: function
+ *   applySystemTheme: function,
+ *   setAccent: function,
+ *   getAccent: function,
+ *   listAccents: function
  * }}
  */
 export const useTheme = () => {
@@ -539,12 +801,21 @@ export const useTheme = () => {
     toggleTheme,
     getColor,
     applySystemTheme,
+    setAccent,
+    getAccent,
+    listAccents,
   };
 };
 
 // ========== INITIALIZATION (safe) ==========
 const initTheme = () => {
   try {
+    // Restored before the first paint, not after: laying the accent on afterwards
+    // would repaint the whole page a frame into boot and flash the brand color
+    // over the reader's own choice.
+    const stored = readStoredAccent();
+    activeAccent = stored?.id ?? null;
+    accentSurfacesOn = Boolean(stored?.surfaces);
     const savedTheme = localStorage.getItem("fletbox-theme");
     if (savedTheme && (savedTheme === "light" || savedTheme === "dark")) {
       applyPalette(savedTheme);
@@ -580,6 +851,11 @@ export default {
   subscribeTheme,
   applySystemTheme,
   watchSystemTheme,
+  registerAccent,
+  setAccent,
+  applyAccentPreference,
+  getAccent,
+  listAccents,
   ThemeProvider,
   useTheme,
 };

package/src/widget-factory/addChildren.js

@@ -54,8 +54,13 @@ export const addChildren = (parent, children, options = {}) => {
 };
 
 /**
- * Removes all children that were previously appended via props (i.e. tracked in
- * `PROP_CHILDREN`).
+ * Removes the children that were previously appended via props (i.e. tracked in
+ * `PROP_CHILDREN`) and **returns them**, so a caller can put them back.
+ *
+ * The return value is the point: an update that swaps the content takes the old
+ * content out first, so if attaching the new content throws, the widget would
+ * be left empty — a hole where the content used to be. Keeping the nodes lets
+ * the caller restore them.
  *
  * Handles two cases:
  * 1. **Normal path** – the node is still a direct child of `parent`. The
@@ -69,14 +74,14 @@ export const addChildren = (parent, children, options = {}) => {
  *
  * @param {HTMLElement} parent - The parent widget whose prop-children should be
  *   removed.
- * @returns {HTMLElement} The parent widget (for chaining).
+ * @returns {Array<Node>} The nodes that were taken out.
  */
-export const removePropChildren = (parent) => {
-  const toRemove = Array.from(parent.childNodes).filter((child) =>
-    PROP_CHILDREN.has(child)
-  );
+export const takePropChildren = (parent) => {
+  const taken = [];
+
+  Array.from(parent.childNodes).forEach((child) => {
+    if (!PROP_CHILDREN.has(child)) return;
 
-  toRemove.forEach((child) => {
     if (child.parentNode === parent) {
       // Normal path: removeChild override also cleans up _children.
       parent.removeChild(child);
@@ -87,11 +92,13 @@ export const removePropChildren = (parent) => {
       if (child._isWidget) child.parent = null;
     }
     PROP_CHILDREN.delete(child);
+    taken.push(child);
   });
 
-  return parent;
+  return taken;
 };
 
+
 /**
  * Removes ALL children from a parent widget, regardless of whether they were
  * appended via props or programmatically.
@@ -111,4 +118,4 @@ export const clearChildren = (parent) => {
   return parent;
 };
 
-export default { addChildren, removePropChildren, clearChildren };
+export default { addChildren, takePropChildren, clearChildren };

package/src/widget-factory/assignProps.js

@@ -1,6 +1,7 @@
 // core/assignProps.js
 import { setStyles } from "./tools.js";
 import { resolveReactive } from "./reactiveValue.js";
+import { guardHandler } from "../utils/errorBoundary.js";
 
 /**
  * Extracts the real value from a prop that may be a reactive accessor or a
@@ -154,11 +155,18 @@ export const assignProps = (widget, props) => {
     if (props.events && Object.keys(props.events).length > 0) {
       Object.entries(props.events).forEach(([event, handler]) => {
         if (typeof handler !== "function") return;
+        // The handler is wrapped where it is attached, so a throw inside it is
+        // reported with the name of the widget that owns it instead of
+        // arriving as an anonymous stack.
+        const guarded = guardHandler(handler, {
+          widgetName: widget._widgetName,
+          event,
+        });
         if (event === "click") {
-          widget.onclick = handler;
+          widget.onclick = guarded;
         } else {
-          widget.addEventListener(event, handler);
-          widget._events.push({ event, handler });
+          widget.addEventListener(event, guarded);
+          widget._events.push({ event, handler: guarded });
         }
       });
     }
@@ -219,11 +227,15 @@ export const assignProps = (widget, props) => {
 
         if (key.startsWith("on") && typeof value === "function") {
           const eventName = key.slice(2).toLowerCase();
+          const guarded = guardHandler(value, {
+            widgetName: widget._widgetName,
+            event: eventName,
+          });
           if (eventName === "click") {
-            widget.onclick = value;
+            widget.onclick = guarded;
           } else {
-            widget.addEventListener(eventName, value);
-            widget._events.push({ event: eventName, handler: value });
+            widget.addEventListener(eventName, guarded);
+            widget._events.push({ event: eventName, handler: guarded });
           }
         } else if (
           [

package/src/widget-factory/createWidget.js

@@ -2,6 +2,7 @@
 
 import { ensureFocusRing } from "../utils/focusRing.js";
 import { ensureFieldFont } from "../utils/fieldFont.js";
+import { installErrorBoundary } from "../utils/errorBoundary.js";
 
 /**
  * Creates a bare DOM element for use as a widget.
@@ -19,6 +20,11 @@ import { ensureFieldFont } from "../utils/fieldFont.js";
  * rule about text fields, and this is the only step that runs exactly once per
  * widget without being owned by any of them.
  *
+ * So does the error boundary: the global handler that catches the errors no
+ * widget owns (a rejected promise, a timer that exploded) belongs to the
+ * document, not to any single widget, and this is the one step every widget
+ * passes through.
+ *
  * @param {string} tag - HTML tag name for the widget.
  *   Defaults to `'div'` when the value is not a string.
  * @returns {HTMLElement} The newly created DOM element with `_events` initialised.
@@ -26,6 +32,7 @@ import { ensureFieldFont } from "../utils/fieldFont.js";
 export const createWidget = (tag) => {
   ensureFocusRing();
   ensureFieldFont();
+  installErrorBoundary();
 
   // Validateste that tag is a string; fall back to 'div' when it is not.
   let finalTag = tag;

package/src/widget-factory/deprecations.js

@@ -0,0 +1,77 @@
+// The names FletBox still honours but no longer recommends.
+//
+// Every row is a promise to an app written against the old spelling: the prop
+// keeps working, and the migration guide says what to write instead. This
+// table is the single source — the guide (`docs/guides/migration.md`), the
+// codemod in `audit-fix` and the contract test (`scripts/check-migrations.mjs`)
+// all read it, so a rename cannot be documented in one place and forgotten in
+// another.
+//
+// A row names a widget, because the same spelling means different things in
+// different widgets: `onToggle` is the old name of `onPress` on `Switch` and
+// on `Accordion`, and the *current* name on `TreeView`, so a flat list of
+// names would send a `TreeView` to rename a prop that is already right.
+
+/**
+ * @typedef {object} Deprecation
+ * @property {string} widget   The widget whose prop is the old spelling.
+ * @property {string} from     The old prop name.
+ * @property {string|null} to  The prop to write instead, or `null` when the old
+ *   prop is read by nobody and the key is simply removed.
+ * @property {string} since    The release that renamed it.
+ * @property {{ prop: string, value: string, to: string }} [alternate]
+ *   The other target, when the call itself says which one applies.
+ * @property {string[]} [guard]
+ *   Props whose presence means the old prop is already inert, so the codemod
+ *   leaves the call alone instead of changing what the screen shows.
+ */
+
+/** @type {Deprecation[]} */
+export const DEPRECATED_PROPS = [
+  { widget: "Accordion", from: "onToggle", to: "onPress", since: "1.2.0" },
+  { widget: "Checkbox", from: "onCheck", to: "onPress", since: "1.2.0" },
+  { widget: "Dropdown", from: "onChange", to: "onPress", since: "1.2.0" },
+  { widget: "Radio", from: "onSelect", to: "onPress", since: "1.2.0" },
+  { widget: "Slider", from: "onChanged", to: "onPress", since: "1.2.0" },
+  { widget: "Switch", from: "onToggle", to: "onPress", since: "1.2.0" },
+  { widget: "Tooltip", from: "tooltipDelay", to: "delay", since: "1.2.0" },
+  {
+    widget: "Scaffold",
+    from: "navSideBar",
+    to: "leftNavBar",
+    since: "1.2.0",
+    // The legacy prop could sit on either side, and the legacy position prop
+    // is what said which. The codemod follows it instead of guessing a side.
+    alternate: { prop: "navSideBarPosition", value: "right", to: "rightNavBar" },
+    // `Scaffold` ignores the legacy sidebar once a new one is present, so a
+    // call that already has one must be left exactly as it is.
+    guard: ["leftNavBar", "rightNavBar"],
+  },
+  {
+    widget: "Scaffold",
+    from: "navSideBarWidth",
+    to: "leftNavBarWidth",
+    since: "1.2.0",
+    alternate: { prop: "navSideBarPosition", value: "right", to: "rightNavBarWidth" },
+    guard: ["leftNavBarWidth", "rightNavBarWidth"],
+  },
+  {
+    widget: "Scaffold",
+    from: "navSideBarPosition",
+    to: null,
+    since: "1.2.0",
+    // The position only ever said which side the *legacy* sidebar was on. Once
+    // the sidebar itself carries the side in its name, this prop is read by
+    // nobody and the key goes with it.
+  },
+];
+
+/**
+ * The deprecation of one prop on one widget, or null.
+ *
+ * @param {string} widget
+ * @param {string} prop
+ * @returns {Deprecation|null}
+ */
+export const deprecationFor = (widget, prop) =>
+  DEPRECATED_PROPS.find((entry) => entry.widget === widget && entry.from === prop) || null;

package/src/widget-factory/translateProps.js

@@ -128,6 +128,11 @@ export const ALL_PROPS = [
   { prop: "wordBreak", domProp: "wordBreak", type: "style", unit: "none", reactive: true },
   { prop: "fontFamily", domProp: "fontFamily", type: "style", unit: "none", reactive: true },
   { prop: "textOverflow", domProp: "textOverflow", type: "style", unit: "none", reactive: true },
+  // Contorno de glifo: `textStroke: "4px #fff"` pinta un aro alrededor de las letras
+  // (-webkit-text-stroke) and `paintOrder: "stroke fill"` put it behind the fill,
+  // so the center keeps its own color instead of having the stroke absorb it.
+  { prop: "textStroke", domProp: "webkitTextStroke", type: "style", unit: "none", reactive: true },
+  { prop: "paintOrder", domProp: "paintOrder", type: "style", unit: "none", reactive: true },
 
   // ============================================================
   // FLEXBOX
@@ -167,7 +172,7 @@ export const ALL_PROPS = [
   { prop: "roundedLeft", domProp: "borderTopLeftRadius", type: "style", unit: "rem", reactive: true, targets: ["borderTopLeftRadius", "borderBottomLeftRadius"] },
   { prop: "roundedRight", domProp: "borderTopRightRadius", type: "style", unit: "rem", reactive: true, targets: ["borderTopRightRadius", "borderBottomRightRadius"] },
 
-  // Aliases simétricos (usados en only_controls: Image({ borderRadiusTop: 20 }))
+  // Symmetric aliases (used in only_controls: Image({ borderRadiusTop: 20 }))
   { prop: "borderRadiusTop", domProp: "borderTopLeftRadius", type: "style", unit: "rem", reactive: true, targets: ["borderTopLeftRadius", "borderTopRightRadius"] },
   { prop: "borderRadiusBottom", domProp: "borderBottomLeftRadius", type: "style", unit: "rem", reactive: true, targets: ["borderBottomLeftRadius", "borderBottomRightRadius"] },
   { prop: "borderRadiusLeft", domProp: "borderTopLeftRadius", type: "style", unit: "rem", reactive: true, targets: ["borderTopLeftRadius", "borderBottomLeftRadius"] },
@@ -502,6 +507,11 @@ export const ALL_PROPS = [
   { prop: "unselectedColor", domProp: "unselectedColor", type: "special" },
   { prop: "showLabels", domProp: "showLabels", type: "special" },
 
+  // ---- ThemePicker ----
+  // The families a picker offers. `listAccents()` is the default and the widget
+  // reads the list to build one swatch per entry, so it must never reach the DOM.
+  { prop: "accents", domProp: "accents", type: "special" },
+
   // ---- DrawerItem / CollapsibleSideBar ----
   { prop: "route", domProp: "route", type: "special" },
   { prop: "trailingIcon", domProp: "trailingIcon", type: "special" },

package/src/widget-factory/warnings.js

@@ -1,7 +1,7 @@
 // core/warnings.js
 // FletBox Warning System – Elegant, minimal, helpful.
 
-// 🚀 Gate of entorno: desactiva warnings in producción
+// 🚀 Environment gate: disable warnings in production
 const IS_DEV = typeof FLETBOX_DEV !== 'undefined' ? FLETBOX_DEV : true;
 
 const suggestionCache = new Map();
@@ -13,7 +13,6 @@ let propNames = [];
 // the cost of a known prop. Because `update()` re-applies every original prop, one
 // unknown prop slowed that widget for its whole lifetime.
 const warnedProps = new Set();
-const warnedDeprecated = new Set();
 
 export function setPropNames(names) {
   propNames = names;
@@ -240,30 +239,6 @@ export function warnUnknownProp(propName, context = {}) {
   console.groupEnd();
 }
 
-export function warnDeprecatedProp(propName, replacement = null, context = {}) {
-  if (!IS_DEV) return;
-  // Same reasoning as `warnUnknownProp`: one report per prop/replacement pair.
-  const deprecatedKey = `${propName}\u0000${replacement || ""}`;
-  if (warnedDeprecated.has(deprecatedKey)) return;
-  warnedDeprecated.add(deprecatedKey);
-
-  const location = getCallLocation();
-
-  printHeader("DEPRECATED PROP");
-  printProp(propName, "is deprecated");
-  if (replacement) {
-    console.log(
-      `  %c🔄 Use:   %c"${replacement}"%c  instead`,
-      "color: #94a3b8; font-size: 13px;",
-      "color: #34d399; font-weight: 700; font-size: 16px;",
-      "color: #94a3b8; font-size: 13px;",
-    );
-  }
-  printLocation(location);
-  printWidget(context.widgetName);
-  console.groupEnd();
-}
-
 export function warnInvalidPropType(propName, expected, actual, context = {}) {
   if (!IS_DEV) return;
 
@@ -292,7 +267,6 @@ export function clearSuggestionCache() {
 
 export default {
   warnUnknownProp,
-  warnDeprecatedProp,
   warnInvalidPropType,
   clearSuggestionCache,
   setPropNames,