Enable lint rule to encourage use of WB ResponsiveTabs/ResponsiveNavigationTabs (#3272)

## Summary:

Wonder Blocks now has new ResponsiveTabs and ResponsiveNavigationTabs components that switches to a dropdown when there is limited space. In general, these components should be preferred for improved accessibility and responsiveness since it avoids 2 dimensional scrolling for users. For more details, check out the [release notes](https://khanacademy.atlassian.net/wiki/x/DoCGDwE)!

To help encourage the use of these new components, we enable a lint rule that disables imports for the NavigationTabs and Tabs components.

Currently, there is one instance of Tabs in Perseus for the keypad. Since this is rendered in a Popover, it is an exception since it is not ideal for the tabs to turn into a dropdown within a popover. Because of this, it is fine to leave the current `Tabs` usage as is, and the lint rule can be used for future use cases where the tabs pattern is needed. 

A similar lint rule was enabled in frontend in: Khan/frontend#8276

Issue: FEI-7513

## Test plan:

- Confirm a lint error is generated when Tabs or NavigationTabs is imported

<img width="906" height="285" alt="Screenshot 2026-02-19 at 3 59 17 PM" src="https://github.com/user-attachments/assets/c730cdc9-198d-43c7-a7e3-4ce48f065f38" />
<img width="924" height="288" alt="Screenshot 2026-02-19 at 3 53 49 PM" src="https://github.com/user-attachments/assets/1bb6e8d8-c1df-4094-a65f-2b38e1206d8e" />

- Confirm lint continues to pass

Author: beaesguerra

Reviewers: beaesguerra, ivyolamit, #wonder-blocks

Required Reviewers:

Approved By: ivyolamit

Checks: ⏭️  1 check has been skipped, ✅ 10 checks were successful

Pull Request URL: #3272

Author: beaesguerra

.changeset/great-lemons-joke.md

@@ -0,0 +1,2 @@
+---
+---

.eslintrc.js

@@ -306,6 +306,19 @@ module.exports = {
                     "Use seeded randomness. See: https://khanacademy.atlassian.net/browse/LEMS-3397",
             },
         ],
+        "no-restricted-imports": [
+            "error",
+            {
+                paths: [
+                    {
+                        name: "@khanacademy/wonder-blocks-tabs",
+                        importNames: ["NavigationTabs", "Tabs"],
+                        message:
+                            "Use WB ResponsiveNavigationTabs or ResponsiveTabs for responsive behaviour. They render NavigationTabs or Tabs by default and switch to a dropdown when space is limited - test both layouts. See https://khan.github.io/wonder-blocks/?path=/docs/packages-tabs-overview--docs. \n\nIf responsiveness isn't needed, ignore this rule for that import.",
+                    },
+                ],
+            },
+        ],
 
         /**
          * monorepo

packages/math-input/src/components/keypad/keypad.tsx

@@ -1,5 +1,6 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
+// eslint-disable-next-line no-restricted-imports -- Intentionally using Tabs instead of ResponsiveTabs to avoid rendering a dropdown within a Popover
 import {Tabs} from "@khanacademy/wonder-blocks-tabs";
 import {border, semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
 import xBold from "@phosphor-icons/core/bold/x-bold.svg";

packages/math-input/src/full-keypad.stories.tsx

@@ -19,7 +19,7 @@ export default {
         docs: {
             description: {
                 component:
-                    "A customizable virtual keyboard for mathematical input that provides different key layouts for various math concepts.",
+                    "A customizable virtual keyboard for mathematical input that provides different key layouts for various math concepts. \n\n Note: This intentionally uses the WB Tabs component (instead of ResponsiveTabs) to avoid rendering a dropdown within a Popover.",
             },
         },
     },