@nadicodeai/ui 12.1.102 → 12.1.103

package/dist/eslint/rules/middle-truncate-placement.js

@@ -0,0 +1,69 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` descendant selector can
+ * match `MiddleTruncate` under an element by name, but not that the name is the
+ * design system's import, that the class sits in a `cn(...)` call or a
+ * same-file table, nor that the nearest control carries an `aria-label`
+ * without a second selector per spelling.
+ */
+import { openingElementClassUtilities } from "./jsx-class-utility.js";
+import { renderedImports } from "./rendered-import.js";
+
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+const CONTROLS = new Set(["Button", "ButtonLink", "TextLink"]);
+const HOST_CONTROLS = new Set(["a", "button"]);
+const NAMING_ATTRIBUTES = new Set(["aria-label", "aria-labelledby"]);
+const TRUNCATING = /^(truncate|text-ellipsis|overflow-ellipsis|line-clamp-(?!none$).+)$/;
+
+const withoutVariants = (utility) => utility.split(":").pop().replace(/^!/, "");
+
+const namesItself = (openingElement) =>
+  openingElement.attributes.some(
+    (attribute) => attribute.type === "JSXAttribute" && NAMING_ATTRIBUTES.has(attribute.name.name),
+  );
+
+export const middleTruncatePlacement = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "MiddleTruncate cuts its own ellipsis and a control around it carries the name.",
+    },
+    schema: [],
+    messages: {
+      "cuts-its-own-ellipsis":
+        "MiddleTruncate cuts its own ellipsis: take it out of the element that also truncates. Inside a control, give the control an aria-label that names its target, since the cut value is not a name.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const designSystemExport = (elementName) => {
+      const imported = importOf(elementName);
+      return imported && FROM_DESIGN_SYSTEM.test(imported.source) ? imported.name : null;
+    };
+    const isControl = ({ name }) =>
+      CONTROLS.has(designSystemExport(name)) ||
+      (name.type === "JSXIdentifier" && HOST_CONTROLS.has(name.name) && !importOf(name));
+    const truncates = (openingElement) =>
+      openingElementClassUtilities(openingElement, context).some((utility) =>
+        TRUNCATING.test(withoutVariants(utility)),
+      );
+
+    return {
+      JSXElement(node) {
+        if (designSystemExport(node.openingElement.name) !== "MiddleTruncate") return;
+        let nearestControl = null;
+        for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+          if (ancestor.type !== "JSXElement") continue;
+          const { openingElement } = ancestor;
+          if (truncates(openingElement)) {
+            context.report({ node: node.openingElement, messageId: "cuts-its-own-ellipsis" });
+            return;
+          }
+          if (!nearestControl && isControl(openingElement)) nearestControl = openingElement;
+        }
+        if (nearestControl && !namesItself(nearestControl)) {
+          context.report({ node: node.openingElement, messageId: "cuts-its-own-ellipsis" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-bare-button-label.js

@@ -0,0 +1,55 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` can match a `Button`
+ * whose text is "OK", but not whether that `Button` is the package's (an
+ * import binding, so a renamed or local one is judged correctly), nor read the
+ * same word off a form's `submit={{ label }}`.
+ */
+import { keyName, childText, literalText } from "./literal-text.js";
+import { renderedImports } from "./rendered-import.js";
+
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const BARE = /^(?:submit|ok|okay|confirm)[.!…]*$/i;
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+
+export const noBareButtonLabel = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A button says its result as a verb and a noun, never a bare Submit, OK or Confirm.",
+    },
+    schema: [],
+    messages: {
+      "bare-label":
+        'A button says its result: "Create customer", "Save changes", "Remove mailbox". "{{label}}" says nothing about what happens.',
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+
+    function report(node, label) {
+      context.report({ node, messageId: "bare-label", data: { label } });
+    }
+
+    return {
+      JSXElement(node) {
+        const imported = importOf(node.openingElement.name);
+        if (!imported || !BUTTONS.has(imported.name) || !FROM_DESIGN_SYSTEM.test(imported.source)) {
+          return;
+        }
+        const label = childText(node);
+        if (label !== null && BARE.test(label)) report(node.openingElement, label);
+      },
+      JSXAttribute(node) {
+        if (node.name.name !== "submit" || node.value?.type !== "JSXExpressionContainer") return;
+        const { expression } = node.value;
+        if (expression.type !== "ObjectExpression") return;
+        for (const property of expression.properties) {
+          if (keyName(property) !== "label") continue;
+          const label = literalText(property.value);
+          if (label !== null && BARE.test(label.trim())) report(property.value, label.trim());
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-control-in-read-only-surface.js

@@ -0,0 +1,106 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `Button` below `TooltipContent`, but not follow a renamed import to the part,
+ * count the links across a HoverCardContent's children and its summary's
+ * `action`.
+ */
+import { renderedImports, walk } from "./rendered-import.js";
+
+const OVERLAYS = new Set(["Tooltip", "HoverCard"]);
+const CONTROLS = new Set(["Button", "ButtonLink", "TextLink", "Link", "a"]);
+const NATIVE_CONTROLS = new Set(["input", "select", "textarea"]);
+const HOVER_CARD_SUMMARY = "HoverCardSummary";
+
+const hasAttribute = (openingElement, attributeName) =>
+  openingElement.attributes.some(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === attributeName,
+  );
+
+export const noControlInReadOnlySurface = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Tooltip text and a Choicebox tile are for reading; a HoverCard holds at most one link.",
+    },
+    schema: [],
+    messages: {
+      "read-only-surface":
+        "Tooltip text and a Choicebox tile are for reading: move the control outside. A HoverCard holds at most one link, through HoverCardSummary's `action`, and never a second Tooltip or HoverCard; for more, open a Popover, a menu or the record's page.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    const nameOf = (element) => {
+      const { name } = element.openingElement;
+      if (name.type !== "JSXIdentifier" && name.type !== "JSXMemberExpression") return null;
+      if (name.type === "JSXIdentifier" && /^[a-z]/.test(name.name)) return name.name;
+      const imported = importOf(name);
+      if (!imported) return null;
+      return imported.name === "default" ? name.name : imported.name;
+    };
+
+    const isInteractive = (element, name) =>
+      CONTROLS.has(name) ||
+      NATIVE_CONTROLS.has(name) ||
+      hasAttribute(element.openingElement, "onClick") ||
+      hasAttribute(element.openingElement, "tabIndex");
+
+    function visitChildren(container, visit) {
+      for (const child of container.children) {
+        if (visit(child) === false) continue;
+        walk(child, visitorKeys, visit);
+      }
+    }
+
+    function checkTooltipContent(container) {
+      visitChildren(container, (child) => {
+        if (child.type !== "JSXElement") return true;
+        const name = nameOf(child);
+        if (!OVERLAYS.has(name) && !isInteractive(child, name)) return true;
+        context.report({ node: child.openingElement, messageId: "read-only-surface" });
+        return false;
+      });
+    }
+
+    function checkChoiceboxItem(container) {
+      visitChildren(container, (child) => {
+        if (child.type !== "JSXElement" || !isInteractive(child, nameOf(child))) return true;
+        context.report({ node: child.openingElement, messageId: "read-only-surface" });
+        return false;
+      });
+    }
+
+    function checkHoverCardContent(container) {
+      let links = 0;
+      visitChildren(container, (child) => {
+        if (child.type !== "JSXElement") return true;
+        const name = nameOf(child);
+        const { openingElement } = child;
+        if (OVERLAYS.has(name)) {
+          context.report({ node: openingElement, messageId: "read-only-surface" });
+          return false;
+        }
+        const isLink =
+          CONTROLS.has(name) ||
+          hasAttribute(openingElement, "onClick") ||
+          (name === HOVER_CARD_SUMMARY && hasAttribute(openingElement, "action"));
+        if (!isLink) return true;
+        links += 1;
+        if (links > 1) context.report({ node: openingElement, messageId: "read-only-surface" });
+        return true;
+      });
+    }
+
+    return {
+      JSXElement(node) {
+        const name = nameOf(node);
+        if (name === "TooltipContent") checkTooltipContent(node);
+        else if (name === "ChoiceboxGroupItem") checkChoiceboxItem(node);
+        else if (name === "HoverCardContent") checkHoverCardContent(node);
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-hand-built-busy.js

@@ -0,0 +1,104 @@
+/*
+ * Standard tool checked first: `no-restricted-imports` refuses an import by
+ * module, but not the same export by module and file area (PendingLabel is
+ * allowed inside packages/ui), and `no-restricted-syntax` cannot join a
+ * PendingLabel element to the Button it sits under through a renamed import.
+ */
+import { openingElementClassUtilities } from "./jsx-class-utility.js";
+import { PACKAGE_BARREL, renderedImports } from "./rendered-import.js";
+
+const PENDING_LABEL = "PendingLabel";
+const PENDING_LABEL_MODULES = new Set([
+  PACKAGE_BARREL,
+  `${PACKAGE_BARREL}/components/pending-label`,
+]);
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const SPINNER_ICONS = new Set([
+  "Loader",
+  "LoaderIcon",
+  "Loader2",
+  "Loader2Icon",
+  "LoaderCircle",
+  "LoaderCircleIcon",
+  "LoaderPinwheel",
+]);
+const ICON_MODULE = "lucide-react";
+const SPIN = "animate-spin";
+const FUNCTIONS = new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression"]);
+
+const PACKAGE_PATH = "/packages/ui/";
+const PORTAL_PATH = "/apps/portal/";
+
+const PENDING_LABEL_ONLY = new Set([PENDING_LABEL]);
+
+const SOURCE_SIDE = { ImportSpecifier: "imported", ExportSpecifier: "local" };
+
+const sourceName = (specifier) => {
+  const named = specifier[SOURCE_SIDE[specifier.type]];
+  return named?.name ?? named?.value;
+};
+
+const isSpinToken = (utility) => utility.split(":").pop().replace(/^!/, "") === SPIN;
+
+function insideAButton(element, importOf) {
+  for (let current = element.parent; current; current = current.parent) {
+    if (FUNCTIONS.has(current.type)) return false;
+    if (current.type === "JSXElement" && BUTTONS.has(importOf(current.openingElement.name)?.name)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export const noHandBuiltBusy = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A working button takes loading and loadingLabel; no product hand-builds a busy label or a spinner.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-busy":
+        "A working button takes loading and loadingLabel: it keeps its place and focus, says its loadingLabel and shows no spinner. A wait past a second is WaitingLine.",
+    },
+  },
+  create(context) {
+    const filename = context.filename.replaceAll("\\", "/");
+    const inPackage = filename.includes(PACKAGE_PATH);
+    const inPortal = filename.includes(PORTAL_PATH);
+    const importOf = renderedImports(context);
+
+    const report = (node) => context.report({ node, messageId: "hand-built-busy" });
+
+    function bannedFrom(source) {
+      if (source === ICON_MODULE) return SPINNER_ICONS;
+      if (!inPackage && PENDING_LABEL_MODULES.has(source)) return PENDING_LABEL_ONLY;
+      return null;
+    }
+
+    function checkImport(node) {
+      if (node.importKind === "type" || node.exportKind === "type") return;
+      const source = node.source?.value;
+      const bannedNames = bannedFrom(source);
+      if (!bannedNames) return;
+      for (const specifier of node.specifiers) {
+        if (specifier.importKind === "type" || specifier.exportKind === "type") continue;
+        if (bannedNames.has(sourceName(specifier))) report(specifier);
+      }
+    }
+
+    return {
+      ImportDeclaration: checkImport,
+      ExportNamedDeclaration: checkImport,
+      JSXElement(node) {
+        if (importOf(node.openingElement.name)?.name !== PENDING_LABEL) return;
+        if (insideAButton(node, importOf)) report(node.openingElement);
+      },
+      JSXOpeningElement(node) {
+        if (inPortal) return;
+        if (openingElementClassUtilities(node, context).some(isSpinToken)) report(node);
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-hand-built-theme-picker.js

@@ -0,0 +1,144 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `Sun` element under a `RadioGroup`, but not the same icon named through a
+ * renamed import, nor an option table declared in the same file, and it cannot
+ * join the icons of two sibling Buttons.
+ */
+import { renderedImports, walk } from "./rendered-import.js";
+
+const ICON_MODULE = "lucide-react";
+const PICKERS = new Set(["RadioGroup", "ToggleGroup", "SegmentedControl", "Switch"]);
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const THEME_ICONS = new Map([
+  ["Sun", "light"],
+  ["SunIcon", "light"],
+  ["Moon", "dark"],
+  ["MoonIcon", "dark"],
+  ["Monitor", "system"],
+  ["MonitorIcon", "system"],
+]);
+const THEME_VALUES = new Set(["light", "dark"]);
+
+const keyName = (property) => property.key.name ?? property.key.value;
+
+function isThemeValue(literal) {
+  const { parent: container } = literal;
+  const parent = container.type === "JSXExpressionContainer" ? container.parent : container;
+  const isItemValue =
+    (parent.type === "JSXAttribute" && parent.name.name === "value") ||
+    (parent.type === "Property" && parent.value === literal && keyName(parent) === "value") ||
+    parent.type === "ArrayExpression" ||
+    parent.type === "CallExpression";
+  return isItemValue && THEME_VALUES.has(literal.value);
+}
+
+const isPropertyName = (identifier) => {
+  const { parent } = identifier;
+  return (
+    (parent.type === "Property" && parent.key === identifier && !parent.computed) ||
+    (parent.type === "MemberExpression" && parent.property === identifier && !parent.computed)
+  );
+};
+
+export const noHandBuiltThemePicker = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "The appearance is chosen with ThemeModeSwitcher or ThemeModeMenu, never a hand-built picker.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-theme-picker":
+        "The appearance is chosen with ThemeModeSwitcher on a settings page or ThemeModeMenu in the account menu; do not rebuild it.",
+    },
+  },
+  create(context) {
+    const { sourceCode } = context;
+    const { visitorKeys } = sourceCode;
+    const importOf = renderedImports(context);
+
+    const iconsByLocalName = new Map();
+    for (const statement of sourceCode.ast.body) {
+      if (statement.type !== "ImportDeclaration" || statement.importKind === "type") continue;
+      if (statement.source.value !== ICON_MODULE) continue;
+      for (const specifier of statement.specifiers) {
+        if (specifier.type !== "ImportSpecifier" || specifier.importKind === "type") continue;
+        const kind = THEME_ICONS.get(specifier.imported.name ?? specifier.imported.value);
+        if (kind) iconsByLocalName.set(specifier.local.name, kind);
+      }
+    }
+
+    const sameFileConstant = (identifier) => {
+      for (let scope = sourceCode.getScope(identifier); scope; scope = scope.upper) {
+        const variable = scope.set.get(identifier.name);
+        if (!variable) continue;
+        const declarator = variable.defs[0]?.node;
+        const isConstant =
+          declarator?.type === "VariableDeclarator" && declarator.parent.kind === "const";
+        return isConstant ? declarator.init : null;
+      }
+      return null;
+    };
+
+    function collect(root, held, followNames) {
+      const visit = (child) => {
+        if (child.type === "JSXOpeningElement") {
+          const imported = importOf(child.name);
+          const kind = imported?.source === ICON_MODULE ? THEME_ICONS.get(imported.name) : null;
+          if (kind) held.icons.add(kind);
+        } else if (child.type === "Identifier" && !isPropertyName(child)) {
+          const kind = iconsByLocalName.get(child.name);
+          if (kind) held.icons.add(kind);
+          else if (followNames) {
+            const init = sameFileConstant(child);
+            if (init) collect(init, held, false);
+          }
+        } else if (child.type === "Literal" && isThemeValue(child)) {
+          held.values.add(child.value);
+        }
+        return true;
+      };
+      visit(root);
+      walk(root, visitorKeys, visit);
+    }
+
+    const holdsAThemeChoice = ({ icons, values }, needsBoth) =>
+      needsBoth ? icons.size >= 2 || values.size === 2 : icons.size >= 1 || values.size === 2;
+
+    const heldBy = (nodes) => {
+      const held = { icons: new Set(), values: new Set() };
+      for (const node of nodes) collect(node, held, true);
+      return held;
+    };
+
+    const buttonsIn = (parent) =>
+      parent.children.flatMap((child) => {
+        if (child.type === "JSXFragment") return buttonsIn(child);
+        const isButton =
+          child.type === "JSXElement" && BUTTONS.has(importOf(child.openingElement.name)?.name);
+        return isButton ? [child] : [];
+      });
+
+    const report = (node) => context.report({ node, messageId: "hand-built-theme-picker" });
+
+    return {
+      JSXElement(node) {
+        if (PICKERS.has(importOf(node.openingElement.name)?.name)) {
+          const held = heldBy([node]);
+          if (holdsAThemeChoice(held, false)) report(node.openingElement);
+          return;
+        }
+        const buttons = buttonsIn(node);
+        if (buttons.length < 2) return;
+        if (holdsAThemeChoice(heldBy(buttons), true)) report(node.openingElement);
+      },
+      JSXFragment(node) {
+        if (node.parent.type === "JSXElement" || node.parent.type === "JSXFragment") return;
+        const buttons = buttonsIn(node);
+        if (buttons.length < 2) return;
+        if (holdsAThemeChoice(heldBy(buttons), true)) report(node);
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-hand-built-tile.js

@@ -0,0 +1,41 @@
+import { findBelow, renderedImports, walk } from "./rendered-import.js";
+
+const FIELD_LABEL = "FieldLabel";
+const FIELD = "Field";
+const CONTROLS = new Set(["RadioGroupItem", "Checkbox"]);
+
+export const noHandBuiltTile = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A bordered selectable tile is a ChoiceboxGroup, never a FieldLabel around a Field with a radio or a checkbox.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-tile":
+        "A bordered selectable tile is a ChoiceboxGroup with ChoiceboxGroupItem. Options without a description are a plain RadioGroup with a Label for each.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+    const isRendered = (name) => (node) =>
+      node.type === "JSXElement" && name(importOf(node.openingElement.name)?.name);
+    const isField = isRendered((name) => name === FIELD);
+    const isControl = isRendered((name) => CONTROLS.has(name));
+
+    return {
+      JSXElement(node) {
+        if (importOf(node.openingElement.name)?.name !== FIELD_LABEL) return;
+        let handBuilt = false;
+        walk(node, visitorKeys, (child) => {
+          if (!isField(child) || !findBelow(child, visitorKeys, isControl)) return true;
+          handBuilt = true;
+          return "stop";
+        });
+        if (handBuilt) context.report({ node: node.openingElement, messageId: "hand-built-tile" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-hand-formatted-date.js

@@ -0,0 +1,87 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` can match a member named
+ * `toLocaleDateString` or `new Intl.DateTimeFormat`, but `toLocaleString` is
+ * also how a number is written, so it is a date only when its options object
+ * names a date or time part, which a selector cannot read. It reports only a
+ * date written into markup (inside a JSX expression of the same function): a
+ * helper that returns a chart label, a period name or an email's text has no
+ * element to put a RecordTime in.
+ */
+const ALWAYS_DATES = new Set(["toLocaleDateString", "toLocaleTimeString"]);
+const DATE_PARTS = new Set([
+  "dateStyle",
+  "timeStyle",
+  "weekday",
+  "era",
+  "year",
+  "month",
+  "day",
+  "dayPeriod",
+  "hour",
+  "minute",
+  "second",
+  "fractionalSecondDigits",
+  "timeZoneName",
+  "hour12",
+  "hourCycle",
+]);
+
+const isIntlDateTimeFormat = (callee) =>
+  callee.type === "MemberExpression" &&
+  !callee.computed &&
+  callee.object.type === "Identifier" &&
+  callee.object.name === "Intl" &&
+  callee.property.name === "DateTimeFormat";
+
+const namesADatePart = (options) =>
+  options?.type === "ObjectExpression" &&
+  options.properties.some(
+    (property) =>
+      property.type === "Property" &&
+      !property.computed &&
+      property.key.type === "Identifier" &&
+      DATE_PARTS.has(property.key.name),
+  );
+
+const FUNCTIONS = new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression"]);
+
+function writtenIntoMarkup(node) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (current.type === "JSXExpressionContainer") return true;
+    if (FUNCTIONS.has(current.type)) return false;
+  }
+  return false;
+}
+
+export const noHandFormattedDate = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "An app shows a moment through RecordTime, never a hand-formatted date.",
+    },
+    schema: [],
+    messages: {
+      "hand-formatted-date":
+        "Show a moment with RecordTime from @nadicodeai/ui/components/record-time: it reads relative within a week, then the date, in the viewer's zone and language, with the exact time in a card. A date formatted by hand drifts from the other screens and shows the server's zone.",
+    },
+  },
+  create(context) {
+    function check(node) {
+      if (!writtenIntoMarkup(node)) return;
+      const { callee } = node;
+      if (isIntlDateTimeFormat(callee)) {
+        context.report({ node, messageId: "hand-formatted-date" });
+        return;
+      }
+      if (callee.type !== "MemberExpression" || callee.computed) return;
+      const name = callee.property.name;
+      if (
+        ALWAYS_DATES.has(name) ||
+        (name === "toLocaleString" && namesADatePart(node.arguments[1]))
+      ) {
+        context.report({ node, messageId: "hand-formatted-date" });
+      }
+    }
+    return { CallExpression: check, NewExpression: check };
+  },
+};

package/dist/eslint/rules/no-hand-stacked-avatars.js

@@ -0,0 +1,67 @@
+import { openingElementClassUtilities } from "./jsx-class-utility.js";
+import { renderedImports } from "./rendered-import.js";
+
+const AVATAR = "Avatar";
+const OVERLAP = /^-(?:space-x-|ml-|ms-|mx-)/;
+
+const hasOverlapClass = (node, context) =>
+  openingElementClassUtilities(node, context).some((utility) =>
+    OVERLAP.test(utility.slice(utility.lastIndexOf(":") + 1).replace(/^!|!$/g, "")),
+  );
+
+function returnedElement(callback) {
+  if (callback?.type !== "ArrowFunctionExpression" && callback?.type !== "FunctionExpression") {
+    return null;
+  }
+  if (callback.body.type !== "BlockStatement") return callback.body;
+  return callback.body.body.find((statement) => statement.type === "ReturnStatement")?.argument;
+}
+
+export const noHandStackedAvatars = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Stacked avatars are one AvatarGroup, never sibling Avatars or an overlap written on a parent or an Avatar.",
+    },
+    schema: [],
+    messages: {
+      "hand-stacked-avatars":
+        "Stacked avatars are one <AvatarGroup members={...} label={...} />, which owns the overlap, the order, the +N count and the group's label.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const reported = new WeakSet();
+    const isAvatar = (node) =>
+      node?.type === "JSXElement" && importOf(node.openingElement.name)?.name === AVATAR;
+
+    function report(avatar) {
+      if (reported.has(avatar)) return;
+      reported.add(avatar);
+      context.report({ node: avatar.openingElement, messageId: "hand-stacked-avatars" });
+    }
+
+    return {
+      JSXElement(node) {
+        if (isAvatar(node) && hasOverlapClass(node.openingElement, context)) report(node);
+        const avatars = node.children.filter(isAvatar);
+        if (avatars.length >= 2) report(avatars[1]);
+      },
+      JSXFragment(node) {
+        const avatars = node.children.filter(isAvatar);
+        if (avatars.length >= 2) report(avatars[1]);
+      },
+      CallExpression(node) {
+        const { callee, parent } = node;
+        const isMap =
+          callee.type === "MemberExpression" && !callee.computed && callee.property.name === "map";
+        if (!isMap) return;
+        if (parent.type !== "JSXExpressionContainer" || parent.parent.type !== "JSXElement") return;
+        if (!hasOverlapClass(parent.parent.openingElement, context)) return;
+        const returned = returnedElement(node.arguments[0]);
+        if (isAvatar(returned)) report(returned);
+      },
+    };
+  },
+};